Webpack 从目录中导入 React 组件

Question

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

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

我的应用/索引.js

import App from 'app/App';
export default {
App
};

我的导航/索引.js：

import Navigation from 'navigation/Navigation';
export default {
Navigation
};

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

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

问题是导入Navigation按预期工作，而导入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}

Answer 2

问题是你通过一个奇怪的类似对象的语法导出：

export default {
Navigation
}

你需要：

export default Navigation

编辑：以更好的格式将我的评论粘贴到下面

您只能有一个默认导出(即使这是可选的(，但总数没有限制。您可以拥有：

// exports.js
export const a = 1
export const b = 2
export function exportTest () {}
// then a default
export default a 

但是 - 导入非默认值仅发生在括号语法中，假设您要导入非默认导出的 b，您需要使用：

import { b } from 'exports' 
// or:
import { b as localName } from 'exports'

虽然您可以导入不带括号的默认值并为其指定任何名称：

import whatever from 'exports'
console.log(whatever) // prints 1, as const a = 1 in exports.js

请参阅 2ality.com/2014/09/es6-modules-final.html 了解更多信息...