React原子設計：組件的組織

我有一個使用原子設計方法的React應用程序。我的組件的組織，像這樣：React原子設計：組件的組織

components 
    |--Atoms 
    | |--Header 
    | | |--index.js 
    | | |--index.test.js 
    | | |--index.stories.js 
    | |--index.js 
    |--index.js

在Header/index.js，我做組件的默認出口。在Atoms/index.js，我出口的所有組件，就像這樣：

export Header from './Header'

在components/index.js我導出所有層，像這樣：

export * from './Atoms' 
export * from './Moleclues'

如果我需要另一個組件中使用的部件，我需要它從components像這樣：

import Header from './../..'

在我的測試中，我別名'./../..'返回一個模擬組件，因此這樣我可以Ø只能測試當前正在測試的組件。

到目前爲止，這種模式一直運行良好。不過，我意識到存在某種循環依賴。我知道這是因爲，當我運行我的故事書應用程序時，某些容器正在導入某些組件，並且該組件將返回未定義的，所以容器將引發錯誤。

這隻發生在一個特定的容器中，並且只發生在我的故事書應用程序中。我無法弄清楚爲什麼這個容器特別決定失敗，爲什麼只在我的故事書應用程序中，所以我推測這是因爲循環依賴。但是，我想知道如何保持所有組件導入爲靜態（即讓它們以相同的方式讀取，以便可以在webpack中繼續使用它們），同時保持乾淨的目錄結構。

謝謝！

來源

2017-09-13 abustamam

你好，你確定你正在從index.js導出你的組件嗎？從「module」輸出*不通過默認輸出，因此返回undefined。請參閱：https：//developer.mozilla。org/en-US/docs/Web/JavaScript/Reference/Statements/export – adz5A

我很確定我正確地做到了。在'Atoms/index.js'中，我輸出所有命名的輸出，所以從'module''輸出*不應該遇到你提到的默認輸出問題。 – abustamam

您好，我仍然不太確定，從我前面引用的文檔中可以看到，爲了重新導出默認模塊，您需要將它轉換爲行：第一次導入默認成員，然後將其重新導出爲命名導出。 – adz5A

我想還是在你從模塊輸出部件中出錯

/* 
* Header.js 
* this exports an object { Header: Header } as default export 
* 
*/ 
export default { Header }  


/* 
* this imports the default member of the exports 
* from the Header module in the same directory. 
* 
*/ 
import Header from "/Header" 


/* 
* If you are transpiling with babel (for instance) you will have an undefined 
* export because what you actually have is 
*/ 

// Header.js 
exports = { Header: Header, __es6: true } 

// index.js 
const Header = require("./Header").default; 


/* 
* Note : your first example is a syntax error and should be 
*/ 
export { Header } from "./Header"; 


/* 
* to make it work correctly you need to 
*/ 
//Header.js 
export { Header }; 

// index.js 
export * from "./Header"; 

// your components 
import { Header } from "path/to/dir"; 
// this last line will find your directory according to your webpack config, as 
// it's a directory it will find the index.js and proceed from there

來源

2017-09-13 16:38:23 adz5A

對不起，我不相信''Header'從'./ Header''導出是不正確的，因爲它在我所有的其他應用程序中甚至在這個應用程序中都能很好地工作。如果它是從'./ Header''導入Header，那麼它會是'export {Header}'，但由於我只是重新導出，它工作正常。我也嘗試'從'./ Header''導出{默認爲標題}，這也不起作用。正如我所提到的，生產應用程序工作正常，只是故事書的應用程序有這個問題。 – abustamam

什麼結束了工作是這樣的：

import Header from './../../atoms'

任何地方，我需要頭，只要它不在另一個原子中。

在原子設計中，組件中不能有相同或更高級別的組件（即分子不能包含另一個分子或生物體，只有原子）。考慮到這一點，如果我們從atoms文件夾中直接取消，將不會有循環依賴關係。

export Header from './Header'工作正常，因爲我使用指定的導出解決了所有默認導出。

要解決嘲諷的問題，我只是瞭解了一些正則表達式：

/^(./?)../../(atoms|molecules|organisms|templates|pages)$/

通過使用此正則表達式，任何時候一個組件導入到另一組成部分，它會嘲笑所有其他組件。

來源

2017-09-14 21:56:57 abustamam

React原子設計：組件的組織

回答

相關問題