一切都可以使用“Box”组件吗？

编程问答 2022-05-15

问题描述

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

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

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

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

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

// vs 

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

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

解决方法

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

对于仅控制布局的内容，您还面临着拥有过多道具（例如 fontSize）的风险。最好根据它们所代表的内容将事物分开，无论它们是否具有相同的属性。

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

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

很像

<div>
    <p>Hello world</p>
</div>
emotionreactjsreactjsreactjsreactjsstyled-componentsstyled-system