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