ES6模块导入未定义

Question

我想弄清楚我有ES6模块导入的问题。

这是我试图做的一个非常简化的版本。嵌套的文件夹使我的当前文件结构复杂得多。

我有2个ReactJS组件：

/buttons 
    /MyComponent1.js 
    /index.js 
/texts 
    /MyComponent2.js 
    /index.js 

/index.js 

我的文件看起来是这样的：

我导入MyComponent2从根index.js文件，该文件是我的包的入口点。

MyComponent1.js

import MyComponent2 from '../../'; 

export default() => (
    <div><MyComponent2 /></div> 
); 

MyComponent2.js

export default() => (
    <div>Hello world</div> 
); 

我buttons/index.js和texts/index.js文件导出所有组件在自己的文件夹：

按钮/索引。 js个

export { default as MyComponent1 } from './MyComponent1'; 

文本/ index.js

export { default as MyComponent2 } from './MyComponent2'; 

我的根index.js出口我的所有文件夹，以使它们公之于众。这是我的入口点：

export * from './buttons'; 
export * from './texts'; 

所以，当我在MyComponent1导入MyComponent2从根index.js文件，它是undefined。当我从./MyComponent2.js导入它时，它已被定义。当我在另一个项目中导入整个软件包并从根index.js文件导入MyComponent2时，它已定义。

这是令人兴奋的，我不明白为什么我不能从根index.js文件导入MyComponent2。

我需要这样做，因为我有一组数百个嵌套在不同文件夹中的组件，并且我希望通过此入口点文件使它们全部可用。

有人能告诉我发生了什么事以及如何使这成为可能吗？

感谢

Answer 1

你可以从各个组件文件导入所有的组件，然后将其分配给根组件的变量，然后导出所有的人作为对象。

import MyComponent1 from './buttons/index'

import MyComponent2 from './texts/index'

export {MyComponent1, MyComponent2}

导入在另一个文件或项目该组件。你只能使用对象解构来导入它们。

import {MyComponent1} from 'index.js'

import {MyComponent2} from 'index.js'

Answer 2

好了，我花了一段时间才能找出发生了什么。请看看我设置的沙盒 - https://codesandbox.io/s/nk0qmo096j

我试着保持文件夹/模块结构与您所描述的类似。请继续阅读之前查看文件夹/模块的结构。

在沙箱中运行代码时，请查看控制台。你会看到这样的事情 -

所以让我尝试解释为什么你想做什么工作不

1. buttons/MyComponent要“出口”的第一个文件（因为其在依赖关系链的底部;项目/索引 - >组件/索引 - >按钮/索引 - >按钮/ MyComponent的）

注意components/index已尚未导出，所以它会返回未定义

然后buttons/index被导出，随后texts/index

然后buttons/MyComponent呈现;它被渲染我手动requirecomponents/index，它现在被定义之前那么返回一些定义的值

从本质上讲，当你MyComponent1试图通过index文件导入MyComponent2，该index文件尚未导出所以它返回undefined。要解决这个问题，你必须在MyComponent1的render方法中使用requireMyComponent2。