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

解決React報錯Property does not exist on type 'JSX.IntrinsicElements'

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

總覽

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

這里有個示例用來展示錯誤是如何發(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是以小寫字母開頭的。

組件大寫

為了解決該問題，請確保所有的組件名稱均以大寫字母開頭。

// 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)置元素和我們定義的自定義組件。

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

類型聲明

如果那都沒有幫助，確保安裝了react的類型聲明文件。在項目的根目錄下打開終端，并運行下面的命令：

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

如果錯誤仍未解決，嘗試刪除node_modules以及package-lock.json（不是package.json）文件，重新運行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

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

總結(jié)

導(dǎo)致該問題的原因是因為自定義組件沒有以大寫字母開頭，因為React是通過這種方式來區(qū)分內(nèi)置元素和自定義組件。

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

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

相關(guān)文章

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

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

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

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

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

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

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

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

    這篇文章主要介紹了React事件處理，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(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動態(tài)操作DOM,實現(xiàn)類似于input輸入框的功能,感興趣的朋友跟隨小編一起看看吧
    2024-10-10
  • React.memo?React.useMemo對項目性能優(yōu)化使用詳解

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

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

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

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

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

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

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

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

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

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

最新評論