快捷導(dǎo)航

解決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)吸底部的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-10-10
React父子組件間的通信是怎樣進(jìn)行的
這篇文章主要介紹了React中父子組件通信詳解，在父組件中，為子組件添加屬性數(shù)據(jù)，即可實(shí)現(xiàn)父組件向子組件通信，文章通過圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2023-03-03
React中的for循環(huán)解讀
這篇文章主要介紹了React中的for循環(huán)解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-01-01
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)容
本文介紹了如何模仿抖音發(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)化的使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01
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效果，文中通過示例代碼介紹的非常詳細(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)組件拖拽功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2021-08-08
為react組件庫添加typescript類型提示的方法
這篇文章主要介紹了為react組件庫添加typescript類型提示，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-06-06