导入错误：“标题”未从“组件/标题”导出

Question

我的组件文件夹中有一个名为 Header 的组件。主要 JS 文件和样式文件。由于某种原因我得到"import error: 'Header' is not exported from 'components/Header'"

标头.js：

const Header = () => {
  return (
    <div>
      <h2>The Header</h2>
    </div>
  );
};

export default Header;

组件/标题/index.js：

export * from "./Header";

应用程序.js：

import { Header } from "components/Header";

function App() {
  return (
    <div className="App">
      <Header />
    </div>
  );
}

export default App;

为什么这不起作用？

Answer 1

这是因为您执行了默认导出（export default Header），因此您必须以这种方式导入它：

import Header from "components/Header"

如果你想使用命名导入（import { Header } from "components/Heaader";），你必须在导出中保留“默认”。

StackOverflow 的这篇文章很好地解释了其中的差异： Why and When to use default export over Named Exports in es6 Modules?