簡化反應的組分導入

我儘量簡化我的零部件進口，從：簡化反應的組分導入

import Component1 from './components/Component1' 
import Component2 from './components/Component2'

爲了這樣的事情：

import {Component1, Component2} from './components/'

我試圖創建index.js文件到組件目錄（下面這篇文章import modules from files in directory）：

export * from 'Component1'; 
export * from 'Component2';

但我仍然有一個「模塊找不到」錯誤。任何線索？

感謝，球

2017-06-13 Orboo

您需要添加一個點，表示它是一個本地文件，而不是一個NPM-發佈的模塊。更改導出行，像這樣

export * from './Component1';

UPD 解決與命名導入下一個問題你需要給一個名字從Component1.js文件默認導出

export Component1 from './Component1';

關注這個answer

2017-06-13 10:50:50

謝謝。我仍然有一個錯誤，但實際上並不一樣。 ''./components/'不包含名爲'Component1'的導出。' – Orboo

@Orboo這是因爲您的Component1.js導出組件爲默認值。您需要從'。/ Component1'導出Component1按照此流程https://stackoverflow.com/a/31402500/351705 –

從'。/ Component1'導出{默認爲Component1}效果不錯（thx），但是 '從'./Component1'中導出Component1;'生成語法錯誤。 – Orboo

你確定路徑是正確的嗎？嘗試指定喜歡的絕對路徑：

進口的Component1從一個 '/ home/your_username /組件/的Component1' 從進口COMPONENT2一個 '/ home/your_username /組件/ COMPONENT2'

你可以看到正確的路徑你的目錄從命令「pwd」從終端。

請務必訪問目錄和文件。您可以嘗試以root身份運行該程序。

2017-06-13 11:00:51 Dsquedo

雖然出口從您的Component1和COMPONENT2而不是*的組件，你應該把它導出爲對象 -

//In Component1.js(x) 
export { Component1 };

和

//In Component2.js(x) 
export { Component2 };

有了這個，你應該能夠進口，如：

import { Component1 } from '...'; 
import { Component2 } from '...';

2017-06-13 11:46:17

是的，我對我的進口做同樣的事情，當它們是從同一個文件中導出。下面是我如何做到這一點的例子：

import Component1 from './Component1'; 
import Component2 from './Component2'; 

module.exports = { 
    Component1, 
    Component2 
};

然後將其導入

import { Component1, Component2 } from './components';

組件/ index.js如果您正在使用的WebPack，退房webpack resolve擺脫你相對路徑。

例使用的WebPack解決

//Will work at any nested level 
import { Component1, Component2 } from 'components';

而只是澄清，Component1和Component2應該使用默認的導出

export default class Component1 extends React.Component {...}

或

var Component1 = createReactClass({...}); 
module.exports = Component1;

2017-06-13 20:19:47

回答