欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React報錯Element type is invalid解決案例

 更新時間:2022年12月19日 11:16:15   作者:chuck  
這篇文章主要為大家介紹了React報錯Element type is invalid解決案例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

總覽

產(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 ModulesCommonJS語法。

你應(yīng)該在你的React.js應(yīng)用程序中只使用import/export語法,而不是module.exportsrequire()語法。

從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)修改方式

    這篇文章主要介紹了React事件監(jiān)聽和State狀態(tài)修改方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • React中路由參數(shù)如何改變頁面不刷新數(shù)據(jù)的情況

    React中路由參數(shù)如何改變頁面不刷新數(shù)據(jù)的情況

    這篇文章主要介紹了React中路由參數(shù)如何改變頁面不刷新數(shù)據(jù)的情況,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • React三大屬性之props的使用詳解

    React三大屬性之props的使用詳解

    這篇文章主要介紹了React三大屬性之props的使用詳解,幫助大家更好的理解和學(xué)習(xí)使用React,感興趣的朋友可以了解下
    2021-04-04
  • antd4里table滾動的實(shí)現(xiàn)

    antd4里table滾動的實(shí)現(xiàn)

    本文主要介紹了antd4里table滾動的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-03-03
  • 使用react-virtualized實(shí)現(xiàn)圖片動態(tài)高度長列表的問題

    使用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-05
  • react使用antd表單賦值,用于修改彈框的操作

    react使用antd表單賦值,用于修改彈框的操作

    這篇文章主要介紹了react使用antd表單賦值,用于修改彈框的操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-10-10
  • React使用react-sortable-hoc如何實(shí)現(xiàn)拖拽效果

    React使用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)不置頂解決方案

    這篇文章主要介紹了詳解關(guān)于React-Router4.0跳轉(zhuǎn)不置頂解決案,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-05-05
  • React報錯之組件不能作為JSX組件使用的解決方法

    React報錯之組件不能作為JSX組件使用的解決方法

    本文主要介紹了React報錯之組件不能作為JSX組件使用的解決方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-07-07
  • react組件基本用法示例小結(jié)

    react組件基本用法示例小結(jié)

    這篇文章主要介紹了react組件基本用法,結(jié)合實(shí)例形式分析了react組件傳值、生命周期、受控組件和非受控組件等相關(guān)操作技巧,需要的朋友可以參考下
    2020-04-04

最新評論