React Core Layout组件架构

Question

我正在使用React Redux。

我们说我有一些＆＃34;核心组件＆＃34;例如Navbar / Header＆amp;页脚。

每个组件都有自己的样式（SCSS）。所以我在考虑以两种方式进行架构：

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

   优点： 听起来更模块化。

   缺点：

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

1. 组件目录和样式的单独目录

   缺点： 它听起来不如第一个建议模块化。

   优点：

   • 我不必为每个组件创建一个文件夹。
   • 我不需要制作index.js。

我不是在寻找有关这方面的讨论，我只需要知道它是否是一个受欢迎的对象。

Answer 1

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

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

这样您就可以像import Component from './Component';

那样导入

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

4. 为常见样式创建sass mixins / functions / variables，并将其放在common.scss的常用位置。 @import它可以在任何地方使用。

<强>优点：

• 简易代码导航
• 轻松调试
• 轻松了解文件结构（我认为文件结构更好）
• 也可以轻松整理单元测试文件。

这就是我们在React.js项目中通常遵循的内容。

（当然喜欢什么，会有一些人解雇这个，但我喜欢这样）。