解決React報(bào)錯(cuò)Property does not exist on type 'JSX.IntrinsicElements'
總覽
當(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)文章!
- vue3+ts中ref與reactive指定類型實(shí)現(xiàn)示例
- 前端React?Nextjs中的TS類型過濾實(shí)用技巧
- react?echarts?tree樹圖搜索展開功能示例詳解
- React.js源碼解析setState流程
- React報(bào)錯(cuò)Function?components?cannot?have?string?refs
- Objects are not valid as a React child報(bào)錯(cuò)解決
- TS裝飾器bindThis優(yōu)雅實(shí)現(xiàn)React類組件中this綁定
- React?setState是異步還是同步原理解析
- React使用useEffect解決setState副作用詳解
- react常見的ts類型實(shí)踐解析
相關(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-10react如何使用useRef模仿抖音標(biāo)題里面添加標(biāo)簽內(nèi)容
本文介紹了如何模仿抖音發(fā)布頁面,使用div元素作為輸入框,并利用CSS樣式和JavaScript動(dòng)態(tài)操作DOM,實(shí)現(xiàn)類似于input輸入框的功能,感興趣的朋友跟隨小編一起看看吧2024-10-10React.memo?React.useMemo對(duì)項(xiàng)目性能優(yōu)化使用詳解
這篇文章主要為大家介紹了React.memo?React.useMemo對(duì)項(xiàng)目性能優(yōu)化的使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01React-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-06react-beautiful-dnd 實(shí)現(xiàn)組件拖拽功能
這篇文章主要介紹了react-beautiful-dnd 實(shí)現(xiàn)組件拖拽功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-08-08