可以对所有内容使用“Box”组件吗？答案

【问题标题】：Is it okay to use "Box" component for everything?可以对所有内容使用“Box”组件吗？
【发布时间】：2021-06-30 14:02:13
【问题描述】：

我目前正在使用带有样式系统插件和文档的情感，有一些 Box 组件的示例，我们可以使用它来创建一些布局块，例如：

<Box width={1/2}>
  <Box mb={2}>
   box 1
  </Box>
  <Box mb={2}>
   box 2
  </Box>
</Box>

在其他一些示例中，我还看到了 Text 组件，它接受诸如 fontSize、fontFamily 等属性。

如果我们可以用 Box 达到同样的效果，那么创建 Text 组件的目的是什么？而且会更短：

<Box width={100}>
  <Text fontSize={2}>text</Text>
</Box>

// vs 

<Box width={100} fontSize={2}>
  text
</Box>

也许是因为一些表演时刻？

【问题讨论】：

【解决方案1】：

我认为其中一个原因是语义（人类可读性）。乍一看，如果它们都是“盒子”，您将无法分辨它们是什么。一切都可以继承 box，但如果有更好的选项可供选择，则不应只是一个 box，例如 Image 或 Flex。

对于仅控制布局的东西，您还会冒着拥有太多道具（例如 fontSize）的风险。最好根据它们所代表的内容来区分它们，无论它们是否具有相同的属性。

这个模型是标准 html 使用的，因为

<Box>
   <Text>Hello world</Text>
</Box>

很像

<div>
    <p>Hello world</p>
</div>

【讨论】：

这可能是错误的，但是当我想创建一个具有 5px 边距的简单文本（例如）时，我觉得它太麻烦了，为此我仍然需要在它周围创建一个 Box .并使用之类的东西，还是这种方法更正确？
这可能是一个人为的例子。我展示的 div 可能还有其他孩子。你是对的，一次次重复这种模式有点奇怪。 Text 仍然可以从 Box 继承（至少我是这样设计的，条条大路通 Box）。所以你可以按照你认为合适的方式做<Text m={2} width="100px">foo</Text>。还记得考虑使用as 关键字，这样你的文本就可以变成 p/H1/span 等。总的来说，你的直觉是正确的，只要 Text 是一个样式（框）。您仍然可以从 Box 中获得可读性的好处。