TA貢獻(xiàn)1868條經(jīng)驗(yàn) 獲得超4個(gè)贊
您可以通過 CSS 使用:empty選擇器：
span:empty{display:none;}如果在其他地方重置，請(qǐng)注意選擇器的特殊性span?display。
TA貢獻(xiàn)1820條經(jīng)驗(yàn) 獲得超10個(gè)贊
你可以試試 {prod.tag1 && <span className="product__tag">{prod.tag1}</span>}
TA貢獻(xiàn)1789條經(jīng)驗(yàn) 獲得超8個(gè)贊
方法一：-
<span className="product__tag" style={{display: (prod.tag1 ? 'block':'none')}}>
{prod.tag1}
</span>
方法2：-
{prod.tag1 && <span className="product__tag">{prod.tag1}</span>}
方法3：-
{prod.tag1 ? <span className="product__tag">{prod.tag1}</span>: null}
TA貢獻(xiàn)1824條經(jīng)驗(yàn) 獲得超8個(gè)贊
內(nèi)聯(lián)樣式
一個(gè)好方法是使用內(nèi)聯(lián)樣式。您可以檢查您的數(shù)據(jù)是否為空，并根據(jù)該情況顯示：無。
const checkData = data == null ? "none" : "block"
...
<span style={{display: checkData}} className="product__tag">{prod.tag1}</span>
<span style={{display: checkData}} className="product__tag">{prod.tag2}</span>
<span style={{display: checkData}} className="product__tag">{prod.tag3}</span>
改變班級(jí)
這是與上一個(gè)類似的解決方案。您可以更改類，然后基于該類更改樣式，而不是直接更改樣式。這可能更簡(jiǎn)潔，并且更適合更大的規(guī)模。
const checkData = data == null ? "product__tag__hide" : "product__tag"
...
<span className={checkData}>{prod.tag1}</span>
<span className={checkData}>{prod.tag2}</span>
<span className={checkData}>{prod.tag3}</span>
...
css
.product__tag__hide{
display: none;
}
舉報(bào)