元素類型無效：需要一個字符串（對於內置組件）或一個類/函數（對於復合組件）但得到：未定義的 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";