javascript - Webpack 从目录导入 React 组件

Question

我有一个问题。我用 create-react-app 制作了我的项目，这基本上是我的结构:

src
├── app
│   ├── index.js
│   └── …
├── navigation
│   ├── index.js
│   └── …
└── …

我的应用程序/index.js

import App from 'app/App';

export default {
  App
};

我的导航/index.js:

import Navigation from 'navigation/Navigation';

export default {
  Navigation
};

问题是我可以轻松地从目录导入:

import { App } from './app';
import { Navigation } from '.navigation';

问题在于导入 Navigation按预期工作并导入 App不起作用。当我像上面一样导入 App 时，我得到 'app' does not contain an export named 'App'如果我尝试像这样导入它:

import App from './app';

我得到一个像这样的对象 {App: function(){}}如果我将其渲染为 <App.App />它按预期工作。唯一的区别是App是类组件并且 Navigation是函数组件。

Answer 1

如果您的文件中有单个导入，您可以使用:

export default FileName

如果您有多个导入，您可以使用:

export { FileName1, FileName2}

如果您想从导出的多个文件中导出特定文件作为默认文件，您可以使用:

export {default as FileName1, FileName2}