【问题标题】:When to Use <Space> component or <Row> and <Col> in Antd V.4?Antd V.4 何时使用 <Space> 组件或 <Row> 和 <Col>?
【发布时间】:2021-09-15 03:56:05
【问题描述】:

什么时候使用空间组件?在它说的网站上

“避免组件粘在一起,设置统一的空间。”

如果通过这种方式,我也可以使用 Row 和 Col 组件来实现相同的目标,

例如: 我在同一行中有 3 个按钮(就像文档中空间组件的基本用法)

使用空间 =>

<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>

感谢所有帮助这个的人:)

【问题讨论】:

    标签: reactjs antd


    【解决方案1】:

    &lt;Space&gt; 和 Grid 组件(&lt;Row&gt;&lt;Col&gt;)用于不同的目的。

    &lt;Space&gt; 旨在用于您有一组需要内联布局的元素并且您希望它们之间有一些间距的情况。将 &lt;Space&gt; 组件与不同的预定义 size 值一起使用会在整个应用程序中带来统一的间距概念。

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

    【讨论】:

    • 嗨!感谢您的回答,我现在看到了这个概念。 :)
    猜你喜欢
    • 1970-01-01
    • 2020-04-20
    • 1970-01-01
    • 2021-01-05
    • 1970-01-01
    • 1970-01-01
    • 2020-07-25
    • 1970-01-01
    • 2018-12-19
    相关资源
    最近更新 更多