React報(bào)錯(cuò)Element type is invalid解決案例

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

這篇文章主要為大家介紹了React報(bào)錯(cuò)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"錯(cuò)誤有多個(gè)原因：

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

為了解決該錯(cuò)誤，確保使用大括號(hào)來導(dǎo)入命名導(dǎo)出而不是默認(rèn)導(dǎo)出，并且只使用函數(shù)或類作為組件。

這里有個(gè)示例來展示錯(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>
  );
}

上述代碼問題在于，我們聲明了Button變量，該變量返回了JSX代碼。

函數(shù)組件

為了解決該錯(cuò)誤，我們必須使用函數(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是一個(gè)函數(shù)，并返回JSX代碼?？梢宰鳛橐粋€(gè)React組件使用。

混淆導(dǎo)入導(dǎo)出

另一個(gè)常見的錯(cuò)誤原因是混淆了默認(rèn)和命名的導(dǎo)入和導(dǎo)出。

當(dāng)組件使用默認(rèn)導(dǎo)出來導(dǎo)出時(shí)，你必須確保導(dǎo)入的時(shí)候沒有使用大括號(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)出來導(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>
  );
}

確保你沒有將一個(gè)組件作為默認(rèn)導(dǎo)出，并試圖將其作為命名導(dǎo)入（用大括號(hào)包裹），或者反過來。因?yàn)檫@是導(dǎo)致錯(cuò)誤的一個(gè)常見原因。

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

檢查路徑

你還應(yīng)該確保指向模塊的路徑拼寫正確，大小寫正確以及指定導(dǎo)出組件的文件。

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

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

使用ESM

確保你沒有混淆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ò)誤信息。