元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：未定义的 React

Posted 2023-02-21

【中文标题】元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：未定义的 React

【英文标题】：Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined React

【发布时间】：2021-05-07 15:59:54

【问题描述】：

以下是给我错误的反应代码 -

错误 -

元素类型无效：应为字符串（用于内置组件） 或类/函数（用于复合组件）但得到：未定义。你 可能忘记从定义它的文件中导出您的组件， 或者您可能混淆了默认导入和命名导入。

查看Star的渲染方法。

代码-

App.js

import "./styles.css";
import  FaStar  from 'react-icons';

function Star() 
  return (
    <FaStar />
  )
 

export default function App() 
  return (
    <div className="App">
      <h1>Star Rating App</h1>
      <Star />
    </div>
  );

我也尝试过编写<Star /> 组件之类的 -

const Star = () => 
  return (
    <FaStar />
  )
 

仍然给出同样的错误。虽然如果我将<Star /> 组件移动到一个单独的文件并将其导入App.js 文件，它就可以工作。

我很想知道这背后的原因。让我围绕它的概念。

编辑 - CodeSandbox - https://codesandbox.io/s/reverent-hawking-7br7g?file=/src/App.js

【参考方案1】：

您需要从正确的命名空间导入它，在本例中为Font Awesome：

// Not 'react-icons'
import  FaStar  from "react-icons/fa";