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。