reactjs - 导入 React 组件时如何使用 ComponentName.js 而不是 index.js（来自 Atomic 设计结构目录）

Question

我正在为我的项目使用Gatsby (React)。我正在使用原子设计文件夹结构，例如：

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

好处

• 组件和资源保持在一起
• 排序无关紧要

缺点

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