React報錯Element type is invalid解決案例
總覽
產(chǎn)生"Element type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got"錯誤有多個原因:
- 在導(dǎo)入組件時,將默認(rèn)導(dǎo)入和命名導(dǎo)入混淆。
- 忘記從文件中導(dǎo)出組件。
- 不正確地定義了一個React組件,例如,作為一個變量而不是一個函數(shù)或類。
為了解決該錯誤,確保使用大括號來導(dǎo)入命名導(dǎo)出而不是默認(rèn)導(dǎo)出,并且只使用函數(shù)或類作為組件。
這里有個示例來展示錯誤是如何發(fā)生的。
// ??? must be function or class (NOT variable) const Button = <button>Click</button>; export default function App() { // ?? Warning: React.jsx: type is invalid -- expected a string // (for built-in components) or a class/function // (for composite components) but got: return ( <div> <Button /> <h1>hello world</h1> </div> ); }
上述代碼問題在于,我們聲明了Button
變量,該變量返回了JSX代碼。
函數(shù)組件
為了解決該錯誤,我們必須使用函數(shù)組件來代替。
// ??? is now function const Button = () => { return <button>Click</button>; }; export default function App() { return ( <div> <Button /> <h1>hello world</h1> </div> ); }
現(xiàn)在,Button
是一個函數(shù),并返回JSX代碼??梢宰鳛橐粋€React組件使用。
混淆導(dǎo)入導(dǎo)出
另一個常見的錯誤原因是混淆了默認(rèn)和命名的導(dǎo)入和導(dǎo)出。
當(dāng)組件使用默認(rèn)導(dǎo)出來導(dǎo)出時,你必須確保導(dǎo)入的時候沒有使用大括號。
// Header.js // ??? default export export default function Header() { return <h2>Hello world</h2>; }
現(xiàn)在,它必須不帶大括號導(dǎo)入。
// ??? default import import Header from './Header'; export default function App() { return ( <div> <Header /> </div> ); }
另一方面,如果你的組件使用命名導(dǎo)出來導(dǎo)出的話,它必須使用大括號導(dǎo)入。
// Header.js // ??? named export export function Header() { return <h2>Hello world</h2>; }
現(xiàn)在,當(dāng)組件被導(dǎo)入時,它必須包裹在大括號內(nèi)。
// ??? named import import {Header} from './Header'; export default function App() { return ( <div> <Header /> </div> ); }
確保你沒有將一個組件作為默認(rèn)導(dǎo)出,并試圖將其作為命名導(dǎo)入(用大括號包裹),或者反過來。因?yàn)檫@是導(dǎo)致錯誤的一個常見原因。
如果錯誤尚未解決,確保重啟你的開發(fā)服務(wù)以及IDE。
檢查路徑
你還應(yīng)該確保指向模塊的路徑拼寫正確,大小寫正確以及指定導(dǎo)出組件的文件。
確保路徑正確的最好方法是刪除它,開始輸入路徑,讓你的IDE用自動補(bǔ)全來幫助你。
如果你開始輸入路徑后沒有得到自動補(bǔ)全,很可能是你的路徑不正確。
使用ESM
確保你沒有混淆ES Modules
和CommonJS
語法。
你應(yīng)該在你的React.js應(yīng)用程序中只使用import/export
語法,而不是module.exports
或require()
語法。
從react-router-dom導(dǎo)入
當(dāng)我們從react-router
而不是react-router-dom
導(dǎo)入東西時,有時也會出現(xiàn)這個錯誤。
// ?? BAD // import {Link} from 'react-router'; // ? GOOD import {Link} from 'react-router-dom';
如果你使用react router,請確保從react-router-dom
導(dǎo)入,而不是從react-router
中。
當(dāng)我們試圖使用不是函數(shù)或類的東西作為一個組件時,會產(chǎn)生"Element type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got:"錯誤信息。
錯誤信息
你應(yīng)該看一下got:
后面的錯誤信息,因?yàn)樗赡鼙砻魇鞘裁丛驅(qū)е碌腻e誤。
當(dāng)我們使用一個組件時,我們必須確保它是一個函數(shù)或一個類。如果你使用任何其他的值作為一個組件,就會引起錯誤。
以上就是React報錯Element type is invalid解決案例的詳細(xì)內(nèi)容,更多關(guān)于React報錯Element type invalid的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
React事件監(jiān)聽和State狀態(tài)修改方式
這篇文章主要介紹了React事件監(jiān)聽和State狀態(tài)修改方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08React中路由參數(shù)如何改變頁面不刷新數(shù)據(jù)的情況
這篇文章主要介紹了React中路由參數(shù)如何改變頁面不刷新數(shù)據(jù)的情況,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08使用react-virtualized實(shí)現(xiàn)圖片動態(tài)高度長列表的問題
一般我們在寫react項(xiàng)目中,同時渲染很多dom節(jié)點(diǎn),會造成頁面卡頓, 空白的情況。為了解決這個問題,今天小編給大家分享一篇教程關(guān)于react-virtualized實(shí)現(xiàn)圖片動態(tài)高度長列表的問題,感興趣的朋友跟隨小編一起看看吧2021-05-05React使用react-sortable-hoc如何實(shí)現(xiàn)拖拽效果
這篇文章主要介紹了React使用react-sortable-hoc如何實(shí)現(xiàn)拖拽效果問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07詳解關(guān)于React-Router4.0跳轉(zhuǎn)不置頂解決方案
這篇文章主要介紹了詳解關(guān)于React-Router4.0跳轉(zhuǎn)不置頂解決案,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-05-05