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

Question

我目前正在使用带有样式系统插件和文档的情感，有一些 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>

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

score 0 · Accepted Answer

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

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

该模型是标准 html 使用的模型，如

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

很像

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

1 回答 1