label=“Status” span={3}，但是span為3無效

<Descriptions title="User Info" layout="vertical" bordered><Descriptions.Item label="Product">Cloud Database</Descriptions.Item><Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item><Descriptions.Item label="Automatic Renewal">YES</Descriptions.Item><Descriptions.Item label="Order time">2018-04-24 18:00:00</Descriptions.Item><Descriptions.Item label="Usage Time">2019-04-24 18:00:00</Descriptions.Item><Descriptions.Item label="Status" span={3}><Badge status="processing" text="Running" /></Descriptions.Item><Descriptions.Item label="Negotiated Amount">$80.00</Descriptions.Item><Descriptions.Item label="Discount">$20.00</Descriptions.Item><Descriptions.Item label="Official Receipts">$60.00</Descriptions.Item><Descriptions.Item label="Config Info">Data disk type: MongoDB<br />Database version: 3.4<br />Package: dds.mongo.mid<br />Storage space: 10 GB<br />Replication factor: 3<br />Region: East China 1<br /></Descriptions.Item></Descriptions>

原因：span={3} 這項(xiàng)，前面的span的總和需要是column的倍數(shù)，在上個例子中，
label="Status"前面的span總和為5，所以無效

解決方法：我是在動態(tài)值渲染中出現(xiàn)的這個問題
在label="Status"前面加一個

<Descriptions.Item span={column} />

其中column為Descriptions中column的值

總結(jié)

以上是生活随笔為你收集整理的React antd Descriptions span属性无效问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。