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/文件夹，更新所有导入和＃39是的！随着时间的推移shared/成为一个improptu模式库，包含我想要/需要在整个应用程序中重用的所有组件。

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

我个人经常使用第一个版本，但这可能只是一个品味问题 - 尝试两者并看看你更喜欢哪一个！

Answer 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。

Answer 3

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

# removes punctuation, filters out stop words, and lowercases

推理：

每个文件夹都是一个功能。
文件夹中的每个文件都有责任。
- src ├── Layout │ ├── Header │ │ ├── Logo.jsx │ │ ├── styled.js │ │ ├── container.js │ │ └── index.js │ └── LeftPanel │ ├── LeftPanel.jsx │ ├── styled.js │ └── index.js └── index.js代表演示组件。
- .jsx是样式组件。仅管理组件的外观。此外，还应在此处导入任何与主题相关的文件，例如colors，borderStyles等。
- styled.js如果我们使用任何状态管理，我们应该有一个工件将我们的组件与该库连接起来。在这种情况下，Redux。
- container.js导出任何相关内容。

我看到这种方法的优势在于，如果您决定使用另一个CSSinJS库，那么必须进行更改。

希望对其他人有意义。

干杯！

样式组件组织

3 个答案: