Webpack 从目录导入 React 组件

Question

我有问题。我用 create-react-app 做了我的项目，这基本上是我的结构：

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

我的app/index.js

import App from 'app/App';

export default {
  App
};

我的navigation/index.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 是 class 组件，而 Navigation 是函数组件。

Answer 1

问题是您正在通过一种奇怪的类似对象的语法导出：

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

Answer 2

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

export default FileName

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

export { FileName1, FileName2}

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

export {default as FileName1, FileName2}

Webpack import React component from directory