样式化组件组织[关闭]

Posted 2023-02-22

【中文标题】样式化组件组织[关闭]

【英文标题】：Styled-components organization [closed]

【发布时间】：2017-08-16 17:01:37

【问题描述】：

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

为了可重用性，将基本样式组件分配给特定组件。

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

这是好的做法吗？

【问题讨论】：

我只是使用一个每文件组件的方式。将组件分开很方便，并且只允许导入需要的组件而不是所有文件。

【参考方案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 文件，其中包含该组件的所有样式组件。好处是您有更少的文件妨碍您，但缺点是更难注意到重复和将组件移动到共享文件夹中的工作量更大。

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

【讨论】：

@mxstbr。该结构是否将样式化组件与原生组件隔离开来？在我当前的项目中，我在同一个文件中将样式组件与本机组件结合在一起，根据经验，我可以说这真的很混乱，另一方面，如果我将样式组件隔离在单独的文件中，我最终会得到大量文件.想象一下，模板中的每个 <div> 包装器都有一个单独的文件，这将是一种矫枉过正。您对此有何建议？

@mxstbr 你没有单独的容器文件夹吗，你会把你的个人页面组件放在哪里，例如。主页.jsx？您也不会将样式化组件与其他展示组件分开吗？

【参考方案2】：

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

原子

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

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

分子

原子组是一个分子。例如：

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

有机体

有机体是一组原子、分子和/或其他有机体。例如：

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。

【讨论】：

现在！这是一件非常有趣的事情，谢谢分享:)

【参考方案3】：

我使用 styled-component 组织项目的方式如下：

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 库，那么很清楚必须在哪里进行更改。

希望对其他人有意义。

干杯！

【讨论】：

我更喜欢这个。