关于react.js: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” 谬误有多个起因：

1. 在导入组件时，将默认导入和命名导入混同。
2. 遗记从文件中导出组件。
3. 不正确地定义了一个 React 组件，例如，作为一个变量而不是一个函数或类。

为了解决该谬误，确保应用大括号来导入命名导出而不是默认导出，并且只应用函数或类作为组件。

这里有个示例来展现谬误是如何产生的。

// 👇️ 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 代码。

函数组件

为了解决该谬误，咱们必须应用函数组件来代替。

// 👇️ is now function
const Button = () => {return <button>Click</button>;};

export default function App() {
  return (
    <div>
      <Button />
      <h1>hello world</h1>
    </div>
  );
}

当初，Button是一个函数，并返回 JSX 代码。能够作为一个 React 组件应用。

混同导入导出

另一个常见的谬误起因是混同了默认和命名的导入和导出。

当组件应用默认导出来导出时，你必须确保导入的时候没有应用大括号。

// Header.js

// 👇️ default export
export default function Header() {return <h2>Hello world</h2>;}

当初，它必须不带大括号导入。

// 👇️ 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>;}

当初，当组件被导入时，它必须包裹在大括号内。

// 👇️ named import
import {Header} from './Header';

export default function App() {
  return (
    <div>
      <Header />
    </div>
  );
}

确保你没有将一个组件作为默认导出，并试图将其作为命名导入（用大括号包裹），或者反过来。因为这是导致谬误的一个常见起因。

如果谬误尚未解决，确保重启你的开发服务以及 IDE。

查看门路

你还应该确保指向模块的门路拼写正确，大小写正确以及指定导出组件的文件。

确保门路正确的最好办法是删除它，开始输出门路，让你的 IDE 用主动补全来帮忙你。

如果你开始输出门路后没有失去主动补全，很可能是你的门路不正确。

应用 ESM

确保你没有混同 ES Modules 和CommonJS语法。

你应该在你的 React.js 应用程序中只应用 import/export 语法，而不是 module.exports 或require()语法。

从 react-router-dom 导入

当咱们从 react-router 而不是 react-router-dom 导入货色时，有时也会呈现这个谬误。

// ⛔️ BAD
// import {Link} from 'react-router';

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

如果你应用 react router，请确保从 react-router-dom 导入，而不是从 react-router 中。

当咱们试图应用不是函数或类的货色作为一个组件时，会产生 ”Element type is invalid — expected a string (for built-in components) or a class/function (for composite components) but got:” 错误信息。

错误信息

你应该看一下 got: 前面的错误信息，因为它可能表明是什么起因导致的谬误。

当咱们应用一个组件时，咱们必须确保它是一个函数或一个类。如果你应用任何其余的值作为一个组件，就会引起谬误。