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

【问题标题】：Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined React元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：未定义的 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

【问题讨论】：

标签： javascript html css reactjs ecmascript-6

【解决方案1】：

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

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

【讨论】：