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

Question

我一直在将 React 类导入容器时遇到问题

我的文件组织如下:

├── 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';， header 已列出，但使用 components.Header 再次未定义。

但是，如果我改为这样做，它会完美地工作

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

谁能解释为什么前两种方法似乎不起作用？我以前用这种方式做过，但我不知道我可能改变了什么(诚然，我问的部分原因只是用一种新的方式输入它，看看它是否有帮助)

此外，我已经能够使用

import { Header } from './components';

来自主目录中的索引文件，效果很好。这个问题似乎与 import { Header } from '../components' only

有关

Answer 1

您可能遇到了循环依赖问题。考虑:

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 指向一个尚未初始化的变量，就像您已经初始化一样

   控制台日志(标题)；让 header = ...

Babel 在这种情况下的行为是使 Header undefined。在真正的原生 ES6 模块环境中，它会抛出异常，因为 Header 尚未初始化。

有两个主要选项可以解决这个问题。任何一个都应该有所帮助:

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

• 重新排序您的导入，以便 Header 已在 components 中初始化。例如

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

  到

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