（React）元素类型无效，需要一个字符串（对于内置组件）或一个类/函数，但得到了

作者

(React) 元素类型无效，需要一个字符串（对于内置组件）或一个类/函数，但得到了

(React) Element type is invalid, expected a string (for built in components) or a class/function but got

出现错误“元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到了”有多种原因：

  1. 导入组件时混合默认导入和命名导入。
  2. 忘记从文件中导出组件。
  3. 错误地定义 React 组件，例如定义为变量而不是函数或类。
  4. 未指定导出组件的文件的完整路径。

预期字符串类型无效但得到了

要解决该错误，请确保使用大括号导入命名导出，并且默认导出不使用且仅使用函数或类作为组件。

声明一个返回 JSX 代码的变量

以下是错误发生方式的一个示例。

应用程序.js
// 👇️ must be a 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 代码的变量。

为了解决这个错误，我们必须声明一个函数组件。

应用程序.js
// 👇️ is now a function
const Button = () => {
  return <button>Click</button>;
};

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

NowButton是一个返回 JSX 代码的函数，可以用作 React 组件。

混合默认导入和命名导入和导出

错误的另一个常见原因是混淆了默认导入和导出以及命名导入和导出。

default当使用export导出组件时
，您必须确保在不使用花括号的情况下导入它。

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

现在，它必须在没有花括号的情况下导入。

应用程序.js
// 👇️ default import
import Header from './Header';

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

另一方面，如果您的组件是使用named导出来导出的，则必须使用花括号来导入它。

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

现在，导入时必须用大括号括起来。

应用程序.js
// 👇️ named import
import {Header} from './Header';

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

确保您没有将组件作为default导出导出并尝试将其作为named导入导入（用大括号括起来），反之亦然，因为这是导致错误的常见原因。

上面的示例假设您从位于同一目录中的文件导入。

如果您需要从上一级目录导入，您可以这样做：

应用程序.js
// 👇️ named export
import {Header} from '../Header'

同样，要从 2 个以上目录导入，您可以执行以下操作：

应用程序.js
// 👇️ named export
import {Header} from '../../Header'

每个文件可以有多个导出，但只能
导出named一个。default

下面是一个utils.js具有多个命名导出的示例文件。

实用程序.js
// 👇️ named export
export const sum = (a, b) => {
  return a + b;
};

// 👇️ named export
export const number = 100;

以下是我们如何将导出导入named到名为App.js.

应用程序.js
// 👇️ named imports
import {sum, number} from './utils';

const App = () => {
  console.log(sum(number, number));

  return (
    <div>
      <h2>Result: {sum(number, number)}</h2>
    </div>
  );
};

export default App;

您可以根据需要在一个文件中进行多次named导出，但只能进行一次default导出。

您也可以混合搭配。以下是使用默认导出来导出函数和使用命名导出来导出变量的示例。

实用程序.js
const sum = (a, b) => {
  return a + b;
};

// 👇️ default export
export default sum;

// 👇️ named export
export const number = 100;

以下是我们如何将默认导出和命名导出导入到名为
App.js.

应用程序.js
// 👇️ default and named imports
import sum, {number} from './utils';

const App = () => {
  console.log(sum(number, number));

  return (
    <div>
      <h2>Result: {sum(number, number)}</h2>
    </div>
  );
};

export default App;

我们sum使用默认导入（无大括号）导入函数，并使用命名导入来导入变量number。

如果错误未解决，请尝试重新启动开发服务器和 IDE。

我写了一份关于
在 React 中使用 ES6 导入和导出的详细指南。

指定要导入的模块的完整路径

确保指定要从中导入的模块的完整路径。

即使调用该文件index.js，也要在导入语句中指定名称。

应用程序.js
import Header from './components/Header/index'

确保您没有不完整的导入语句。

应用程序.js
// ⛔️ incomplete import statement
import Header from './components/'

import 语句以正斜杠结尾并且不完整。这通常会导致错误。

相反，请确保指定导出组件的文件的完整路径。

应用程序.js
import Header from './components/Header/index'

指向模块的路径应该拼写正确

您还应该确保：

  1. 指向模块的路径拼写正确。
  2. 外壳是正确的。
  3. 特定文件导出组件。
确保路径正确的最佳方法是将其删除，开始输入路径，然后让 IDE 帮助您自动完成。

如果您开始输入路径后没有获得自动完成功能，则您的路径很可能不正确。

确保不要混淆
ES 模块
和 CommonJS 语法。

import/export您应该只在 React.js 应用程序中使用语法，而不是module.exportsorrequire()语法。

只从 导入react-router-dom，而不是从react-router

react-router
当我们从而不是导入某些内容时，有时也会发生该错误react-router-dom。

应用程序.js
// ⛔️ BAD
// import {Link} from 'react-router';

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

如果您使用 REact Router，请确保导入 fromreact-router-dom而不是 from react-router。

尝试使用非函数或类的东西作为组件

当我们尝试使用
不是函数或类的东西作为组件时，也会发生该错误。

应用程序.js
// 👇️ must be a function or class (NOT variable)
const Button = <button>Click</button>;
您应该立即查看 后的错误消息got: ，因为它可能表明导致错误的原因。
应用程序.js
// 👇️ is now a function
const Button = () => {
  return <button>Click</button>;
};

当我们使用组件时，我们必须确保它是一个函数或一个类。如果使用任何其他值作为组件，则会导致错误。

import React在文件顶部添加一条语句

如果所有建议都没有帮助，请尝试在文件顶部添加以下导入语句。

应用程序.js
// 👇️ add this import statement
import React from 'react';

const App = () => {
  return (
    <div>
      <h2>bobbyhadz.com</h2>
    </div>
  );
};

export default App;

在最新版本的 React 中，该import React from 'react'语句不是必需的，但是，根据您的设置，它有时会出现故障。

额外资源

您可以通过查看以下教程了解有关相关主题的更多信息：