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

Question

我正在学习 React。

React 似乎高度促进了组合。 Create React App 甚至建议不要重用 css 类。

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

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

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

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

这不是矫枉过正吗？这样做有什么好处？我是否应该为所有可以重复使用的东西创建一个组件，即使它是一件很小的事情？

Answer 1

老实说，这是个人喜好和经验的问题。

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

稍后，您决定某个其他控件内的每个白框都需要更多阴影，因此您去为.some-component .white-box 添加一个 CSS 规则，然后 bam，现在你得到了一个阴影更白的盒子，而不会弄乱原来的 CSS 类。 简单又好用！

问题是，当你这样做一两次时，就没事了。但是您很快就会养成为特定目的“修补”类名称规则的习惯，并且在您知道之前，您会在自己不知道的情况下混合规则，这正是它在锡上所说的：Cascading 样式表。

我自己也去过那里，维护起来并不有趣。现在我为所有东西创建组件，即使是像白盒子这样简单的东西。诀窍是正确命名它们；你不会称它为WhiteBox，因为如果你改变框的颜色，剩下的代码就是谎言。 ;) 相反，称之为ContentBox;描述它的目的，而不是它的样子。然后使用 props 来判断盒子应该具备哪些特征：

<ContentBox shadow padded rounded>Awesome</ContentBox>

我个人是CSS Modules 的忠实粉丝，因为他们确保班级规则永远不会发生冲突，从而完全避免了上述问题。相反，如果您希望一个类从另一个类继承某些样式，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 文件中的样式。在我们公司的许多内部网络应用程序中，我都非常喜欢使用这种策略进行重用。

Answer 2

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

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

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

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

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