解決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'解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

總覽

當(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'的詳細內(nèi)容，更多關(guān)于React報錯JSX.IntrinsicElements的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

React實現(xiàn)表單提交防抖功能的示例代碼
在 React 應(yīng)用中,防抖（Debounce）技術(shù)可以有效地限制函數(shù)在短時間內(nèi)的頻繁調(diào)用,下面我們就來看看如何使用Lodash庫中的debounce函數(shù)實現(xiàn)React表單提交中實現(xiàn)防抖功能吧
2024-01-01
基于antd的autocomplete的二次封裝查詢示例
這篇文章主要為大家介紹了基于antd的autocomplete的二次封裝查詢示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-08-08
react-redux的connect與React.forwardRef結(jié)合ref失效的解決
這篇文章主要介紹了react-redux的connect與React.forwardRef結(jié)合ref失效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-05-05
React使用TypeScript的最佳實踐和技巧
在React項目中使用TypeScript可以顯著提高代碼的可維護性和可讀性,并提供強大的類型檢查功能,減少運行時錯誤,以下是一些優(yōu)雅地將TypeScript集成到React項目中的最佳實踐和技巧,需要的朋友可以參考下
2024-06-06
react-player實現(xiàn)視頻播放與自定義進度條效果
本篇文章通過完整的代碼給大家介紹了react-player實現(xiàn)視頻播放與自定義進度條效果，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧
2022-01-01
淺談React底層實現(xiàn)原理
本文主要介紹了淺談React底層實現(xiàn)原理，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-07-07
React中使用antd組件的方法
antd?是基于?Ant?Design?設(shè)計體系的?React?UI?組件庫，主要用于研發(fā)企業(yè)級中后臺產(chǎn)品，這篇文章主要介紹了React中使用antd組件,需要的朋友可以參考下
2022-09-09
React?Suspense解決競態(tài)條件詳解
這篇文章主要為大家介紹了React?Suspense解決競態(tài)條件詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-11-11
關(guān)于React動態(tài)修改元素樣式的三種方式
這篇文章主要介紹了關(guān)于React動態(tài)修改元素樣式的三種方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
教你如何實現(xiàn)在react項目中嵌入Blazor
這篇文章主要介紹了如何實現(xiàn)在react現(xiàn)有項目中嵌入Blazor,通過這個案例我們可以知道 blazor也可以像react那樣嵌入在任何的現(xiàn)有項目中，并且使用方便，需要的朋友可以參考下
2023-01-01