在 Antd V.4 中何时使用 <Space> 组件或 <Row> 和 <Col>？

Question

什么时候使用 Space 组件？在网站上它说

"Avoid components clinging together and set a unified space."

如果那样的话，我也可以使用 Row 和 Col 组件来实现同样的事情，

例如：我在同一行有 3 个按钮（就像文档上 Space 组件的基本用法）

使用 Space =>

<Space>
  <Button type="primary">Button1</Button>
  <Button type="primary">Button2</Button>
  <Button type="primary">Button3</Button>
</Space>

使用行和列组件 =>

<Row gutter={8}>
  <Col span={8}> 
    <Button type="primary">Button 1 </Button>
  </Col>
  <Col span={8}> 
    <Button type="primary">Button 1 </Button>
  </Col>
  <Col span={8}> 
    <Button type="primary">Button 1 </Button>
  </Col>
</Row>

感谢所有对此提供帮助的人:)

Answer 1

<Space> 和网格组件（<Row> 和 <Col>）用于不同的目的。

<Space> 旨在用于您有一组需要内联布局的元素并且您希望它们之间有一些间距的情况。使用具有不同预定义 size 值的 <Space> 组件可以在整个应用程序中形成统一的间距概念。

网格组件旨在满足更复杂的布局要求。虽然确实可以使用 Grid 组件实现 <Space> 组件的相同结果，但使用 Grid 组件来实现间距需求并不能为您提供贯穿整个应用程序的统一间距概念。对于您给出的示例，使用 <Row> 和 <Col> 组件来实现间距基本上是矫枉过正。

在 Antd V.4 中何时使用 <Space> 组件或 <Row> 和 <Col>？

When to Use <Space> component or <Row> and <Col> in Antd V.4?

reactjs

antd