Question

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

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

我的app / 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}

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