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功能组件。

score 1 · Accepted Answer

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

export default FileName

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

export { FileName1, FileName2}

如果您想从多个导出的文件中默认导出某些文件，您可以使用：

export {default as FileName1, FileName2}

score 0 · Accepted Answer

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

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

2 回答 2