我正在尝试解决我在使用ES6模块导入时遇到的问题。
以下是我尝试实现的简化版本。我的实际文件结构更加复杂,并且有嵌套的文件夹。
我有两个ReactJS组件:
/buttons
/MyComponent1.js
/index.js
/texts
/MyComponent2.js
/index.js
/index.js
我的文件看起来像这样:
我从根目录下的 index.js
文件中导入了 MyComponent2
组件,该文件是我的包的入口点。
MyComponent1.js
import MyComponent2 from '../../';
export default () => (
<div><MyComponent2 /></div>
);
MyComponent2.js
export default () => (
<div>Hello world</div>
);
我的 buttons/index.js
和 texts/index.js
文件导出了它们各自文件夹中的所有组件:
buttons/index.js
export { default as MyComponent1 } from './MyComponent1';
texts/index.js
export { default as MyComponent2 } from './MyComponent2';
我的根目录 index.js
导出所有的文件夹以使它们公开可用。这是我的入口点:
export * from './buttons';
export * from './texts';
所以当我从根目录的index.js
文件中导入MyComponent2
到MyComponent1
中时,它是undefined
。当我从./MyComponent2.js
中导入时,它是定义的。当我在另一个项目中导入整个包并从根目录的index.js
文件中导入MyComponent2
时,它是已定义的。
这让我很难理解,我不知道为什么不能从根目录的index.js
文件中导入MyComponent2
。
我需要这样做,因为我有一组嵌套在不同文件夹中的一百个组件,并且我想使它们都可以从此入口点文件中使用。
有人能告诉我发生了什么事情,以及如何使这成为可能吗?
谢谢
export default MyComponent1
导入方式:import MyComponent1 from './index'
- Artem Kolodko