欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

解決React報(bào)錯(cuò)Property does not exist on type 'JSX.IntrinsicElements'

 更新時(shí)間:2022年12月02日 09:23:56   作者:Borislav Hadzhiev  
這篇文章主要為大家介紹了React報(bào)錯(cuò)Property does not exist on type 'JSX.IntrinsicElements'解決方法,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

總覽

當(dāng)組件名稱以小寫字母開頭時(shí),會(huì)導(dǎo)致"Property does not exist on type 'JSX.IntrinsicElements'"錯(cuò)誤。為了解決該錯(cuò)誤,確保組件名稱總是以大寫字母開頭,安裝React聲明文件并重啟你的開發(fā)服務(wù)器。

這里有個(gè)示例用來展示錯(cuò)誤是如何發(fā)生的。

// App.tsx
// ??? name starts with lowercase letter
function myComponent() {
  return <h1>Hello world</h1>;
}
function App() {
  return (
    <div>
      {/* ?? Property does not exist on type 'JSX.IntrinsicElements'. */}
      <myComponent />
    </div>
  );
}
export default App;

上述代碼片段的問題在于,myComponent是以小寫字母開頭的。

組件大寫

為了解決該問題,請(qǐng)確保所有的組件名稱均以大寫字母開頭。

// App.tsx
function MyComponent() {
  return <h1>Hello world</h1>;
}
function App() {
  return (
    <div>
      <MyComponent />
    </div>
  );
}
export default App;

React使用這種命名慣例來區(qū)分p、div、span等內(nèi)置元素和我們定義的自定義組件。

如果錯(cuò)誤仍未解決,嘗試重啟IDE和開發(fā)服務(wù)器。

類型聲明

如果那都沒有幫助,確保安裝了react的類型聲明文件。在項(xiàng)目的根目錄下打開終端,并運(yùn)行下面的命令:

# ??? with NPM
npm install --save-dev @types/react @types/react-dom
# ----------------------------------------------
# ??? with YARN
yarn add @types/react @types/react-dom --dev

如果錯(cuò)誤仍未解決,嘗試刪除node_modules以及package-lock.json(不是package.json)文件,重新運(yùn)行npm install并重啟IDE。

# ??? delete node_modules and package-lock.json
rm -rf node_modules
rm -f package-lock.json
# ??? clean npm cache
npm cache clean --force
npm install

如果錯(cuò)誤仍然存在,請(qǐng)確保重新啟動(dòng)你的IDE和開發(fā)服務(wù)器。VSCode經(jīng)常出現(xiàn)故障,重啟有時(shí)會(huì)解決一些問題。

總結(jié)

導(dǎo)致該問題的原因是因?yàn)樽远x組件沒有以大寫字母開頭,因?yàn)镽eact是通過這種方式來區(qū)分內(nèi)置元素和自定義組件。

翻譯原文鏈接:bobbyhadz.com/blog/react-…

以上就是解決React報(bào)錯(cuò)Property does not exist on type 'JSX.IntrinsicElements'的詳細(xì)內(nèi)容,更多關(guān)于React報(bào)錯(cuò)JSX.IntrinsicElements的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • React操作真實(shí)DOM實(shí)現(xiàn)動(dòng)態(tài)吸底部的示例

    React操作真實(shí)DOM實(shí)現(xiàn)動(dòng)態(tài)吸底部的示例

    本篇文章主要介紹了React操作真實(shí)DOM實(shí)現(xiàn)動(dòng)態(tài)吸底部的示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-10-10
  • React父子組件間的通信是怎樣進(jìn)行的

    React父子組件間的通信是怎樣進(jìn)行的

    這篇文章主要介紹了React中父子組件通信詳解,在父組件中,為子組件添加屬性數(shù)據(jù),即可實(shí)現(xiàn)父組件向子組件通信,文章通過圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下
    2023-03-03
  • React中的for循環(huán)解讀

    React中的for循環(huán)解讀

    這篇文章主要介紹了React中的for循環(huán)解讀,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • React事件處理超詳細(xì)介紹

    React事件處理超詳細(xì)介紹

    這篇文章主要介紹了React事件處理,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-09-09
  • react如何使用useRef模仿抖音標(biāo)題里面添加標(biāo)簽內(nèi)容

    react如何使用useRef模仿抖音標(biāo)題里面添加標(biāo)簽內(nèi)容

    本文介紹了如何模仿抖音發(fā)布頁面,使用div元素作為輸入框,并利用CSS樣式和JavaScript動(dòng)態(tài)操作DOM,實(shí)現(xiàn)類似于input輸入框的功能,感興趣的朋友跟隨小編一起看看吧
    2024-10-10
  • React.memo?React.useMemo對(duì)項(xiàng)目性能優(yōu)化使用詳解

    React.memo?React.useMemo對(duì)項(xiàng)目性能優(yōu)化使用詳解

    這篇文章主要為大家介紹了React.memo?React.useMemo對(duì)項(xiàng)目性能優(yōu)化的使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-01-01
  • React中useEffect函數(shù)的使用詳解

    React中useEffect函數(shù)的使用詳解

    useEffect是React中的一個(gè)鉤子函數(shù),用于處理副作用操作,這篇文章主要為大家介紹了React中useEffect函數(shù)的具體用法,希望對(duì)大家有所幫助
    2023-08-08
  • React-Route6實(shí)現(xiàn)keep-alive效果

    React-Route6實(shí)現(xiàn)keep-alive效果

    本文主要介紹了React-Route6實(shí)現(xiàn)keep-alive效果,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧<BR>
    2022-06-06
  • react-beautiful-dnd 實(shí)現(xiàn)組件拖拽功能

    react-beautiful-dnd 實(shí)現(xiàn)組件拖拽功能

    這篇文章主要介紹了react-beautiful-dnd 實(shí)現(xiàn)組件拖拽功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2021-08-08
  • 為react組件庫添加typescript類型提示的方法

    為react組件庫添加typescript類型提示的方法

    這篇文章主要介紹了為react組件庫添加typescript類型提示,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-06-06

最新評(píng)論