React组件导入报错：Element type无效，页面未显示预期内容

你遇到的错误核心原因是错误导出了组件函数的执行结果，而非组件本身。

在ExpenseItem.js中，你写了export default ExpenseItem();——这里的ExpenseItem()会立即执行函数并返回一个React元素（本质是对象），但React要求组件必须是函数或类类型，所以当你在App.js中用<ExpenseItem />尝试渲染时，就会抛出"Element type is invalid"的错误。

修正后的代码 #

ExpenseItem.js #

function ExpenseItem() {
    return <h2>Expense item!</h2>;
}
// 导出函数本身，不要加括号调用
export default ExpenseItem;

App.js #

import ExpenseItem from "./components/ExpenseItem.js";
function App() {
  return (
    <div> 
      <h2>hello world! </h2>
      <ExpenseItem></ExpenseItem>
    </div>
  );
}
export default App;

修正后，页面就能正常显示"hello world!"和"Expense item!"两行内容了。

内容的提问来源于stack exchange，提问作者benjamin Nguyen