React報錯Element type is invalid解決案例

更新時間：2022年12月19日 11:16:15 作者：chuck

這篇文章主要為大家介紹了React報錯Element type is invalid解決案例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

總覽

產生"Element type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got"錯誤有多個原因：

在導入組件時，將默認導入和命名導入混淆。
忘記從文件中導出組件。
不正確地定義了一個React組件，例如，作為一個變量而不是一個函數(shù)或類。

為了解決該錯誤，確保使用大括號來導入命名導出而不是默認導出，并且只使用函數(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組件使用。

混淆導入導出

另一個常見的錯誤原因是混淆了默認和命名的導入和導出。

當組件使用默認導出來導出時，你必須確保導入的時候沒有使用大括號。

// Header.js
// ??? default export
export default function Header() {
  return <h2>Hello world</h2>;
}

現(xiàn)在，它必須不帶大括號導入。

// ??? default import
import Header from './Header';
export default function App() {
  return (
    <div>
      <Header />
    </div>
  );
}

另一方面，如果你的組件使用命名導出來導出的話，它必須使用大括號導入。

// Header.js
// ??? named export
export function Header() {
  return <h2>Hello world</h2>;
}

現(xiàn)在，當組件被導入時，它必須包裹在大括號內。

// ??? named import
import {Header} from './Header';
export default function App() {
  return (
    <div>
      <Header />
    </div>
  );
}

確保你沒有將一個組件作為默認導出，并試圖將其作為命名導入（用大括號包裹），或者反過來。因為這是導致錯誤的一個常見原因。

如果錯誤尚未解決，確保重啟你的開發(fā)服務以及IDE。

檢查路徑

你還應該確保指向模塊的路徑拼寫正確，大小寫正確以及指定導出組件的文件。

確保路徑正確的最好方法是刪除它，開始輸入路徑，讓你的IDE用自動補全來幫助你。

如果你開始輸入路徑后沒有得到自動補全，很可能是你的路徑不正確。

使用ESM

確保你沒有混淆ES Modules和CommonJS語法。

你應該在你的React.js應用程序中只使用import/export語法，而不是module.exports或require()語法。

從react-router-dom導入

當我們從react-router而不是react-router-dom導入東西時，有時也會出現(xiàn)這個錯誤。

// ?? BAD
// import {Link} from 'react-router';
// ? GOOD
import {Link} from 'react-router-dom';

如果你使用react router，請確保從react-router-dom導入，而不是從react-router中。

當我們試圖使用不是函數(shù)或類的東西作為一個組件時，會產生"Element type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got:"錯誤信息。