样式组件组织

Question

我想在我的应用程序中使用样式组件，我想知道如何组织它。

基本上样式化的组件被分配给特定的组件以实现可重用性。

但是我想在其他组件（例如动画组件）中多次使用的样式组件呢？我是否应该创建一个文件来保存这些 'global' 样式组件并将其导入到许多组件中？

这是好的做法吗？

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/ 变成了一个即兴的模式库，其中包含我 want/need 可以在我的整个应用程序中重复使用的所有组件。

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

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

Answer 2

您也可以尝试 Atomic Design 构建您的应用程序。这样您就可以重用您的样式化组件。基于原子设计方法，您将组件组织成原子、分子、有机体、页面和模板。

原子

一个原子是原生的html标签。例如，输入元素可以是 Atom

const Input = props => <input {...props} />

分子

原子团就是一个分子。例如：

const Field = ({ label, ...inputProps }) => (
    <Label>
        {label}
        <Input {...inputProps} />
    </Label>
)

生物体

生物体是一群原子、分子and/or其他生物体。例如：

const Form = (props) => (
    <form {...props}>
        <Field label="Name" type="text" />
        <Field label="Email" type="email" />
    </form>
)

页数

页面是放置大部分生物体的地方。例如：

const HomePage = () => (
    <PageTemplate header={<Header />}>
        <Form />
    </PageTemplate>
)

模板

模板是要在页面上使用的布局。例如：

const PageTemplate = ({ header, children }) => (
    <main>
        {header && <div>{header}</div>}
        {children}
    </main>
)

Github 例子

Github 上有一个 React 入门项目，它使用带有样式组件集成的原子设计方法。这是 Link.

Answer 3

我使用样式组件组织我的项目的方式如下：

src
├── Layout
│   ├── Header
│   │   ├── Logo.jsx    
│   │   ├── styled.js
│   │   ├── container.js
│   │   └── index.js
│   └── LeftPanel
│       ├── LeftPanel.jsx
│       ├── styled.js
│       └── index.js
└── index.js

推理：

每个文件夹都是一个功能。
文件夹中的每个文件都有责任。
- .jsx 表示一个演示组件。
- styled.js 是有样式的组件。只管理组件的外观。此外，任何与主题相关的文件都应导入此处，例如颜色、边框样式等。
- container.js 如果我们使用任何状态管理，我们应该有一个工件将我们的组件与该库连接起来。在这种情况下 Redux.
- index.js 导出相关内容。

我看到这种方法的优点是，如果您决定使用另一个 CSSinJS 库，必须在哪些地方进行更改是非常清楚的。

希望它对其他人有意义。

干杯！

样式组件组织

Styled-components organization

css

reactjs

styled-components