React Core Layout组件体系结构

Question

我正在使用React Redux。

比方说，我有一些“核心部件”，如导航栏/页眉页脚&。

每个组件都有自己的风格（SCSS）。所以我想在两个方面做的架构：

---

1. 每个组件都有自己的风格在同一个文件夹中。

   优点：听起来更加模块化。

   缺点：

   • 我不得不为每个组件创建新的目录。
   • 为了使import更清晰（而不是像import CoreComp from 'CoreComp/CoreComp'），我将添加为每个组件index.js文件，这将导入组件，它会更有意义。

---

1. 组件用于样式

   缺点指南和单独的目录：听起来比第一建议模块化少。

   优点：

   • 我没有做一个文件夹的每个组件。
   • 我不需要输入index.js。

---

我不是在寻找一个有关的讨论，我只需要知道，如果有一个流行的convension了点。所有的

开始=>

Answer 1

首先，不要担心创建文件夹。他们不花你任何字节。

2.对于每个组件，假设我们有一个文件夹Component，在Component/index.js和export default写组件的代码。

所以，你可以导入，就像import Component from './Component';

3。组件的样式进入Component/styles.scss。

4.创建常见风格的sass mixins /函数/变量，并将它放在common.scss中。 @import它和使用任何你想要的。

优点：

• 易典导航
• 易于调试
文件结构（更好地组织文件结构在我看来）
• 轻松地组织单元测试文件为
• 容易理解好。

这是我们通常在React.js项目中遵循的。 （当然，就像任何事情一样，会有一些人解雇这个，但我喜欢这种方式）。