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

Question

我正在学习反应。

看来 React 非常促进组合。Create React App甚至建议不要重用 css 类。

假设我有一个容器，它是一个白色的盒子，有漂亮的圆角和阴影等。它可以包含任何东西。就是这样。没有逻辑。除了a之外没有太多html<div>

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

我知道在 React 中你也可以做到这一点。你想做什么，就可以做什么。但一般做法是什么？从我在网上找到的内容来看，我似乎应该为它创建一个组件并将所有子组件放入其中：

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

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

Answer 1

老实说，这取决于个人喜好和经验。

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

稍后，您决定其他控件内的每个白色框都需要更多的阴影，因此您去添加 CSS 规则.some-component .white-box，然后砰的一声，现在您得到了一个更阴影的白色框，而不会弄乱原始内容CSS 类。好，易于！

问题是，当你这样做一次或两次时，就没有问题了。但你很快就会养成一种习惯，为特定目的“修补”类名规则，在你意识到之前，你自己就在不知不觉中混合了规则，这正是它的包装上所说的：层叠样式表。

我自己也经历过这样的情况，维护起来一点也不有趣。现在我为所有东西创建组件，甚至是像白盒这样简单的东西。诀窍是给它们起正确的名字；你不会调用它，WhiteBox因为如果你改变了盒子的颜色，你的代码的其余部分就是一个谎言。;) 相反，可以将其称为ContentBox; 描述其用途的东西，而不是它的外观。然后使用 props 来确定盒子应该具有哪些特征：

<ContentBox shadow padded rounded>Awesome</ContentBox>

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

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 文件中的样式。我很享受在我们公司的许多内部 Web 应用程序中使用此策略的良好重用。