遇到 React 报错： Element type is invalid: expected a string ，该如何解决？-JavaScript中文网-JavaScript教程资源分享门户

在使用 React 进行前端开发的过程中，可能会遇到 Element type is invalid: expected a string 这样的报错信息。这个错误提示意味着在使用 React.createElement() 函数时出现了问题，它期望的类型是字符串，但实际传入的不是一个字符串。

这个错误不是 React 独有的，一些其他的 JavaScript 库和框架也可能出现这样的问题。但在 React 中，这个错误通常是由两种情况引起的。

场景一：组件名书写错误

准备工作已经就绪，使用 import 引入组件 module，可以定义以下组件：

import React from 'react'

const MyComponent = () => {
  return (
    <div>
      <h1>My Component</h1>
    </div>
  )
}

在 index.js 中使用组件：

import React from 'react'
import ReactDOM from 'react-dom'
import MyComponet from './MyComponent'

ReactDOM.render(
  <MyComponet />,
  document.getElementById('root')
)

此时，页面出现 Element type is invalid: expected a string ，这个错误提示就意味着我们没有正确引入 MyComponent 组件。

这种情况通常是组件名写错了，导致组件的引入失败。在这个例子中，我们定义了 MyComponent 组件，但在使用它的时候拼写错误，写成了 MyComponet。因此，我们可以将 import 语句中的 MyComponet 改成 MyComponent，代码如下：

import React from 'react'
import ReactDOM from 'react-dom'
import MyComponent from './MyComponent'

ReactDOM.render(
  <MyComponent />,
  document.getElementById('root')
)

组件名书写错误是很常见的错误，在代码书写过程中一定要仔细核对组件名的拼写是否正确。

场景二：组件文件未正确引用

第二种常见的错误是，组件文件没有正确引入。在前面的示例中，我们假设组件是 ./MyComponent.js 文件中定义的，但如果在编译或运行过程中，React 没有正确加载该文件并导出 MyComponent 组件，则会出现 Element type is invalid: expected a string 的错误提示。

例如，如果我们将组件文件名从 MyComponent.js 更改为 MyComponent.jsx，然后在引用组件时未更新文件名，就会出现这个错误。这里示例代码如下：

import React from 'react'
import ReactDOM from 'react-dom'
import MyComponent from './MyComponent.js'

ReactDOM.render(
  <MyComponent />,
  document.getElementById('root')
)

在这个例子中，我们仍然在代码中引用了 MyComponent.js 文件，而实际上该文件更改了扩展名为 MyComponent.jsx。因此，我们应该在 import 语句中更新文件扩展名，代码如下：

import React from 'react'
import ReactDOM from 'react-dom'
import MyComponent from './MyComponent.jsx'

ReactDOM.render(
  <MyComponent />,
  document.getElementById('root')
)

总结

在使用 React 进行开发的过程中，Element type is invalid: expected a string 是一个常见的错误提示。通常它意味着组件没有正确引入。这篇文章提供了两种场景的示例：组件名书写错误和组件文件未正确引用。希望这篇文章能为你的前端开发工作提供帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65ae6c17add4f0e0ff7f9762