ES6模块未在React中按预期导入

Question

我将反应类导入容器时遇到了问题

我的文件组织如下：

├── components
│   ├── Header
│   │   ├── Header.js
│   │   └── index.js
│   └── index.js
├── containers
│   └── HeaderContainer.js
└── index.js

其中components/Header/Header.js导出

export default class Header extends Component {}

components/Header/index.js是

import Header from './Header';
import './Header.scss';

export default Header;

和components/index.js是

export Header from './Header';

和containers / HeaderContainer.js正在尝试使用

导入

import { Header } from '../components';

但是，这不起作用，Header未定义。

如果我使用import * as components from '../components';， 列出了标题，但再次使用components.Header未定义。

但是，如果我改为

，它的效果非常好

import Header from '../components/Header';

任何人都可以解释为什么前两种方法似乎不起作用？我在这之前已经完成了，我无法弄清楚我可能已经改变了什么（诚然，我要问的部分原因只是以一种新的方式输入它并看看它是否有帮助）< / p>

此外，我已经能够使用

了

import { Header } from './components';

从主目录中的索引文件，它完美地工作。问题似乎只与import { Header } from '../components'

有关

Answer 1

导出有两种类型：named和default。 应使用类似以下的构造来使用命名导出：

import { Header } from '../components';

另一方面，默认应该像：

一样消费

import Header from '../components';

您可以阅读更多here;

Answer 2

您可能存在周期性依赖问题。考虑：

1. components/index.js开始加载。
2. 它认为它需要containers/HeaderContainer.js，因此它会暂停。
3. containers/HeaderContainer.js开始加载。
4. 它认为它需要import { Header } from '../components';，因此它会暂停。
5. components/index.js已从步骤1加载，因此此步骤为无操作。
6. containers/HeaderContainer.js重新开始运行。

7. 由于components/index.js仍在加载，导入的Header指向尚未初始化的变量，就像你做的那样

   的console.log（报头）; 让Header = ...

Babel在这种情况下的行为是Header undefined。在真正的本机ES6模块环境中，它会引发异常，因为Header尚未初始化。

有两个主要选项可以解决这个问题。任何人都应该帮忙：​​

• 直接导入../components/Header以避免已加载components/index.js。

• 重新排序您的导入，因此Header已初始化components。 e.g。

  export { HeaderContainer } from './containers/HeaderContainer';
  export { Header } from './Header';
  

  到

  export { Header } from './Header';
  export { HeaderContainer } from './containers/HeaderContainer';
  

Answer 3

因为您可以从路径中省略的唯一内容是index.js

所以，如果你有

import Header from '../components/Header';

与

相同

import Header from '../components/Header/index.js';

但是如果你输入

import { Header } from '../components';

解释器期望在../components/index.js文件中，如果../components.js是文件而不是文件夹，它可能只是components，它会找到一个命名导出

export const Header = () => {...}

More about exports