Question

我有一个使用原子设计方法的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 './../..'

在我的测试中，我已经别名'./../..'返回一个模拟组件，这样我只能测试当前正在测试的组件。

到目前为止，这种模式运作良好。但是，我已经意识到存在某种循环依赖。我知道这个的原因是因为当我运行我的故事书应用程序时，某些容器正在导入某些组件，并且该组件将返回undefined，因此容器将抛出错误。

这只发生在一个特定的容器中，并且仅在我的故事书应用程序中。我无法弄清楚为什么这个容器特别决定失败，为什么只有我的故事书应用程序，所以我推测它是因为循环依赖。但是，我想知道如何保持所有组件导入静态（即，让它们以相同的方式读取，以便我可以继续在webpack中对它们进行别名处理），同时保持一个干净的目录结构。

谢谢！

Answer 1

我认为从模块中导出成员的方式仍然存在错误

/*
 * 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

Answer 2

最终工作的是：

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

我需要Header的任何地方，只要它不在另一个原子中。

在原子设计中，组件中不能有相同或更高级别的组件（也就是说，分子不能包含另一个Molecule或Organism，只能包含Atoms）。请记住，如果我们直接从atoms文件夹中提取，则不存在循环依赖关系。

export Header from './Header'和export * from './atoms一样正常，因为我使用命名导出解决了所有默认导出。

为了解决模拟问题，我刚刚学到了一些正则表达式：

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

通过使用此正则表达式，只要组件导入另一个组件，它就会模拟所有其他组件。

反应原子设计：组件的组织

2 个答案: