React報錯之組件不能作為JSX組件使用的解決方法
總覽
組件不能作為JSX組件使用，出現(xiàn)該錯誤有多個原因：
- 返回JSX元素數(shù)組，而不是單個元素。
- 從組件中返回JSX元素或者
null以外的任何值。 - 使用過時的React類型聲明。
返回單個JSX元素
下面是一個錯誤如何發(fā)生的示例。
// App.tsx
// ?? 'App' cannot be used as a JSX component.
// Its return type 'Element[]' is not a valid JSX element.
// Type 'Element[]' is missing the following properties from type 'ReactElement<any, any>': type, props, key
const App = () => {
return ['a', 'b', 'c'].map(element => {
return <h2 key={element}>{element}</h2>;
});
};
export default App;
代碼示例中的問題是，我們返回的是一個JSX元素數(shù)組，而不是單個JSX元素。
為了解決這種情況下的錯誤，我們必須使用React fragment 或者div元素來包裹數(shù)組。
// App.tsx
const App = () => {
return (
<>
{['a', 'b', 'c'].map(element => {
return <h2 key={element}>{element}</h2>;
})}
</>
);
};
export default App;
現(xiàn)在我們的組件返回了單個JSX元素，這樣錯誤就解決了。
當我們需要對子節(jié)點列表進行分組而不需要向DOM中添加額外的節(jié)點時，就會使用Fragments。
您可能還會看到使用了更加詳細的fragments語法。
// App.tsx
import React from 'react';
const App = () => {
return (
<React.Fragment>
{['a', 'b', 'c'].map(element => {
return <h2 key={element}>{element}</h2>;
})}
</React.Fragment>
);
};
export default App;
你也可以使用div元素來充當包裹器，從組件中返回單個JSX元素。
不要忘記返回值
另一個常見原因是，我們從組件中返回JSX元素或者null以外的任意值，或者忘記返回值。
// ?? 'App' cannot be used as a JSX component.
// Its return type 'undefined' is not a valid JSX element.
const App = () => {
// ??? this returns undefined
return
<h2>hello world</h2>
};
export default App;
上述代碼示例返回undefined，因為我們把返回語句放在一行，而把JSX代碼放在下一行，并且沒有使用括號。
我們不允許從組件中返回
undefined，因此會出現(xiàn)這個錯誤。
為了解決該錯誤，我們必須確保返回的代碼是可達的。
const App = () => {
return (
<div>
<h2>hello world</h2>
</div>
);
};
export default App;
如果你確信從React組件中，返回了單個JSX元素或者null 。但是錯誤依舊存在，試著更新React類型聲明。
更新React類型聲明
在項目的根目錄下打開終端，運行以下命令：
# ??? with NPM npm install --save-dev @types/react@latest @types/react-dom@latest # ??? if you also want to update react and react-dom npm install react@latest react-dom@latest # ------------------------------ # ??? with YARN yarn add @types/react@latest @types/react-dom@latest --dev # ??? if you also want to update react and react-dom yarn add react@latest react-dom@latest
該命令將會更新你的react類型聲明版本。
確保重啟開發(fā)服務器，如有必要請重啟IDE。開發(fā)服務器不會接收這些更改，直到你停止它并重新運行
npm start命令。
如果錯誤還沒有被解決，嘗試刪除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 rm -f yarn.lock # ??? clean npm cache npm cache clean --force npm install
如果錯誤依舊存在，請確保重啟了IDE和開發(fā)服務器。VSCode經(jīng)常出現(xiàn)故障，有時重啟就能解決問題。
到此這篇關于React報錯之組件不能作為JSX組件使用的解決方法的文章就介紹到這了,更多相關React JSX組件使用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
React整個的渲染機制就是React會調用render()函數(shù)構建一棵Dom樹，在state/props發(fā)生改變的時候，render()函數(shù)會被再次調用渲染出另外一棵樹，重新渲染所有的節(jié)點，構造出新的虛擬Dom tree2022-11-11
React Hook父組件如何獲取子組件的數(shù)據(jù)/函數(shù)
這篇文章主要介紹了React Hook父組件如何獲取子組件的數(shù)據(jù)/函數(shù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家介紹了React?Native項目中啟用Hermes引擎實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要介紹了React生命周期原理與用法,結合實例形式總結分析了react生命周期原理、用法及相關注意事項,需要的朋友可以參考下2020-04-04
在React項目中使用TypeScript可以顯著提高代碼的可維護性和可讀性,并提供強大的類型檢查功能,減少運行時錯誤,以下是一些優(yōu)雅地將TypeScript集成到React項目中的最佳實踐和技巧,需要的朋友可以參考下2024-06-06
在react項目中使用antd的form組件,動態(tài)設置input框的值
這篇文章主要介紹了在react項目中使用antd的form組件,動態(tài)設置input框的值，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
React應用框架Dva數(shù)據(jù)流向原理總結分析
這篇文章主要為大家介紹了React 應用框架Dva數(shù)據(jù)流向原理總結分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
這篇文章主要為大家詳細介紹了React的三大屬性，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
Next.js搭建Monorepo組件庫文檔實現(xiàn)詳解
這篇文章主要為大家介紹了Next.js搭建Monorepo組件庫文檔，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要介紹了react native 原生模塊橋接的簡單說明小結，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-02-02