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

Question

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

错误 -

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

检查 的渲染方法Star。

代码 -

应用程序.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

Answer 1

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

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