Question

我正在学习React。

似乎React高度促进了作曲。 创建React App 甚至建议不要重用css类。

假设我有一个容器，这是一个白色的盒子，有很好的圆角和阴影等。它可以包含任何东西。而已。没有逻辑。除了<div>

之外没有多少HTML

传统上，我只想创建一个名为.white-box的全局css类，然后将其应用于我希望它成为此白框的任何<div>。

我知道在React中你也可以这样做。你想做什么，就可以做什么。但一般做法是什么？从我在网上找到的，似乎我应该为它创建一个组件并将任何孩子放在里面：

<WhiteBox> <div>anything</div> </WhiteBox>

是不是有点过头了？这样做有什么好处？我是否应该为可以重复使用的所有东西创建一个组件，即使它是如此小的东西？

Answer 1

这实际上是个人偏好和经验的问题。

例如，看似务实的方法是在div上使用.white-box类; 它非常简单，无需导入！

稍后一点，您决定其他控件中的每个白框都需要更多阴影，因此您可以为.some-component .white-box和bam添加CSS规则，现在你有了一个阴影的白色盒子而没有弄乱原来的CSS类。 很好，很简单！

问题，当你这样做一次或两次时，它没问题。但是你很快就会习惯于修补＆＃34;类名称规则用于特定目的，在您了解之前，您在不知情的情况下混合规则，这正是它在锡上所说的：层叠样式表。

我自己一直在那里，维持并不好玩。现在我为所有东西创建组件，甚至像白盒子一样简单。诀窍是将它们命名为正确;你不会把它称为WhiteBox，因为如果你改变了该行的方框颜色，你的其余代码就是谎言。 ;）相反，称之为ContentBox;某些东西描述了它的目的，而不是它的外观。然后使用道具来确定框应具有的特征：

<ContentBox shadow padded rounded>Awesome</ContentBox>

我个人是CSS Modules的忠实粉丝，因为他们确保课程规则永远不会发生冲突，从而完全避免上述问题。相反，如果您希望一个类从另一个继承某些样式，CSS Modules允许您将它们组合在一起。

示例CSS模块文件：

.root {
  background-color: #fff;
}

还有一个React组件：

import React from 'react'
import styles from './ContentBox.css'

export default function ContentBox({ children }) {
  return (
    <div className={styles.root}>{children}</div>
  )
}

实际使用的类名实际上类似于ContentBox__root_abcd123random，因此即使您有另一个具有相同.root类的CSS文件，规则也不会发生冲突。

这样做的另一个好处是，您的组件现在可以移植到其他项目，因为它仅取决于组件附带的CSS文件中的样式。我在公司的许多内部网络应用程序中使用此策略非常享受重复使用。

Answer 2

没错。当您确信应用程序中的功能相同时，这并不是一种矫枉过正的做法。例如，你可以像你说的那样拥有漂亮的阴影样式，或者保证所有容器都有白色背景，或者可能有一个fluid道具，它将扩展整个父宽度的元素。

事实上，像Semantic UI React这样的React框架会exactly like this。

每当你看到自己设计一些应该在你的代码库中保持一致的HTML时，就应该为它创建一个独特的组件。如果你认为你的组件足够大，也许你应该将它们分解。

这种方法使您的代码易于测试，一旦使用有限和明确定义的功能测试小东西比使用多个功能的大组件更容易。一旦你将它们粘合在一起，由于React one-way data flow approach，你就知道为什么东西不起作用了 - 你现在每个特征都有简单的组件，如果它们没有按预期工作，那么只有一个数据流来了。

作为初学者，这些概念可能难以掌握。但是一旦你开始深入研究大型代码库和项目，你就会看到你的应用程序“模块化”将如何带来长期的好处。

React - 每个样式元素的组件？

2 个答案: