总览

产生"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: 后面的错误信息，因为它可能表明是什么原因导致的错误.

当我们使用一个组件时，我们必须确保它是一个函数或一个类。如果你使用任何其他的值作为一个组件，就会引起错误.

最后此篇关于React报错之Elementtypeisinvalid的文章就讲到这里了,如果你想了解更多关于React报错之Elementtypeisinvalid的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。