css - 样式组件组织

Question

<分区>

Answer 1

这是我使用样式化组件构建的大多数大型生产应用程序的样子:

src
├── App
│   ├── Header
│   │   ├── Logo.js    
│   │   ├── Title.js   
│   │   ├── Subtitle.js
│   │   └── index.js
│   └── Footer
│       ├── List.js
│       ├── ListItem.js
│       ├── Wrapper.js
│       └── index.js
├── shared
│   ├── Button.js
│   ├── Card.js
│   ├── InfiniteList.js
│   ├── EmojiPicker
│   └── Icons
└── index.js

App 文件夹包含构成更大应用程序的所有特定组件。 (您可能会在您的真实应用程序中通过路由构建它)每个较大的组件都是一个文件夹，其中包含一个 index.js 文件和单个文件中的一堆样式化组件。

当我构建我的应用程序时，我注意到我需要一个来自另一个更大组件的更大组件的样式化组件，我将它的文件拖到 shared/ 文件夹，更新所有导入，这就是它!随着时间的推移，shared/ 变成了一个即兴的模式库，其中包含我想要/需要在我的整个应用程序中重用的所有组件。

另一种相当常见的方法是在组件文件夹中放置 style.js 文件，其中包含该组件的所有样式化组件。好处是妨碍您的文件较少，但缺点是更难注意到重复，将组件移动到共享文件夹需要更多工作。

我个人经常使用第一个版本，但这可能只是个人喜好问题 — 都尝试一下，看看您更喜欢哪个!