Antd 的Descriptions

antd 官方的Descriptions用法是这样的

 <Descriptions title="User Info" layout="vertical">
    <Descriptions.Item label="UserName">Zhou Maomao</Descriptions.Item>
    <Descriptions.Item label="Telephone">1810000000</Descriptions.Item>
    <Descriptions.Item label="Live">Hangzhou, Zhejiang</Descriptions.Item>
    <Descriptions.Item label="Remark">empty</Descriptions.Item>
  </Descriptions>,

效果图如下

image.png

但是有个需求是，根据传入的字段判断，决定Descriptions.Item的渲染

 <Descriptions title="User Info" layout="vertical">
    <Descriptions.Item label="UserName">Zhou Maomao</Descriptions.Item>
    {
            this.props.data.name=="王善良"&&(
            <Fragment>
              <Descriptions.Item label="Telephone">1810000000</Descriptions.Item>
              <Descriptions.Item label="Live">Hangzhou, Zhejiang</Descriptions.Item>
            </Fragment>
    }
  </Descriptions>,

这里加了个Fragment包裹，发现效果出不来，这两个Descriptions.Item重叠在一起，而且样式全乱了，
把Fragment换成div了还是没用
最后解决方法是一个一个来

 <Descriptions title="User Info" layout="vertical">
    <Descriptions.Item label="UserName">Zhou Maomao</Descriptions.Item>
    {this.props.data.name=="王善良"&&(<Descriptions.Item label="Telephone">1810000000</Descriptions.Item>)}
    {this.props.data.name=="王善良"&&(<Descriptions.Item label="Live">Hangzhou, Zhejiang</Descriptions.Item>)}
  </Descriptions>,