有什么办法能简洁一点 ,看着怪怪的。

Question

import { PageHeader, Alert, Space, Card, Row, Col } from 'antd';

class A extends Component{
  constructor(props: any) {
    super(props);
    this.state = {};
  }
render(){
return(
<>
<PageHeader className="site-page-header" title="CSDN-title" breadcrumb={{ routes }}>
          <Alert
            message="CSDN-message"
            type="warning"
            showIcon
          />
          <Space direction="vertical" size="middle" style={{ width: '100%' }}>
            <Card title="Card-CSDN-title" >
              <p>CSDN:{}</p>
              <p>CSDN-p:{}</p>
              {* 这里是一条虚线，可以的话麻烦也帮忙，谢谢 *}
              <p>CSDN-pp:{}</p>
<p>CSDN-pp:{}</p>
<p>CSDN-pp:{}</p>
<p>CSDN-pp:{}</p>
              <Card>
                <Row>
                  <Col span={8}>姓名/名称：XXXXX</Col>
                  <Col span={8}>联系方式：1234567890</Col>
                  <Col span={8}>提供的数据类型：XXXXX</Col>
                    {* 这里没有间距 *}
                  <Col span={8}>CSDN-这里没有间距：{}</Col>
                </Row>
              </Card>
<Card>
                <Row>
                  <Col span={8}>姓名/名称：XXXXX</Col>
                  <Col span={8}>联系方式：1234567890</Col>
                  <Col span={8}>提供的数据类型：XXXXX</Col>
                    {* 这里没有间距 *}
                  <Col span={8}>CSDN-这里没有间距：{}</Col>
                </Row>
              </Card>
</Card>
          </Space>
        </PageHeader>
</>
)
}
}

Answer 1

 <Card>
                <Row>
                  <Col span={8}>姓名/名称：XXXXX</Col>
                  <Col span={8}>联系方式：1234567890</Col>
                  <Col span={8}>提供的数据类型：XXXXX</Col>
                    {* 这里没有间距 *}
                  <Col span={8}>CSDN-这里没有间距：{}</Col>
                </Row>
              </Card>
</Card>

这块可以提取出来做个一个函数，传递数据进去返回，减少代码重复，其他的好像没什么可以减少的了

{* 这里是一条虚线，可以的话麻烦也帮忙，谢谢 *}

这个可以用底部边框dotted来做

<div style={{ borderBottom: 'dotted 1px #ccc' }}></div>