How can I use ComponentName.js instead of index.js when importing React component (from Atomic design structure directory)

Question

I am using Gatsby中的字符串（反应）。我正在使用Atomic design文件夹结构，例如：

src/components/Organisms/Header

在这个文件夹中，我希望拥有：

src/components/Organisms/Header/header.js
src/components/Organisms/Header/header.module.scss

如何从header.js中导入src/components/layout.js，例如：

import Header from '@components/Organisms/Header'

代替：

import Header from '@components/Organisms/Header/header'

更新：

我设法做到了：

• 将index.js文件添加到src/components/Organisms/Header/
• 和export { default } from './header';中的index.js

但这是最佳做法吗？

Answer 1

您在这里有一些选择。使用所有这些，您将导入src/components/Header。

1。平无组件目录（我的偏爱）：

src
└── components
    ├── Header.js
    └── header.module.css

好处

• 减少无意义的嵌套
• 在您的编辑器（例如索引）中打开没有冲突/混乱的文件名
• 易于跟踪进出口

缺点

• 一次性资源和子组件无处可去

---

2。相邻的组件和资源目录（Ruby风格）：

src
└── components
    ├── Header
    │   ├── header.module.css
    │   └── logo.png
    └── Header.js

好处

• 资源和子组件保持在一起
• 在您的编辑器（例如索引）中打开没有冲突/混乱的文件名
• 易于跟踪进出口

缺点

• 该组件与资源不相邻，因此导入需要使用./Header/前缀
• 根据排序，可能未在紧邻组件的位置列出资源目录

---

3。使用导出Header的目录索引：

src
└── components
    └── Header
        ├── Header.js
        ├── header.module.css
        ├── index.js
        └── logo.png

好处

• 组件和资源保持在一起
• 排序无所谓

缺点

• 在编辑器中打开冲突/混乱的文件名（例如索引）
• 进出口混乱，可能导致难以诊断的错误
• 每个组件的额外工作