TA貢獻1868條經驗 獲得超4個贊
您可以通過 CSS 使用:empty選擇器：
span:empty{display:none;}如果在其他地方重置，請注意選擇器的特殊性span?display。
TA貢獻1789條經驗 獲得超8個贊
方法一：-
<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貢獻1824條經驗 獲得超8個贊
內聯樣式
一個好方法是使用內聯樣式。您可以檢查您的數據是否為空，并根據該情況顯示：無。
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>
改變班級
這是與上一個類似的解決方案。您可以更改類，然后基于該類更改樣式，而不是直接更改樣式。這可能更簡潔，并且更適合更大的規模。
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;
}
舉報