总览
产生"Element type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got"错误有多个原因:
- 在导入组件时,将默认导入和命名导入混淆。
- 忘记从文件中导出组件。
- 不正确地定义了一个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:
后面的错误信息,因为它可能表明是什么原因导致的错误。
当我们使用一个组件时,我们必须确保它是一个函数或一个类。如果你使用任何其他的值作为一个组件,就会引起错误。