如何使用 React 在数据为 NULL 时隐藏 HTML 上的元素

Question

当数据为空时，如何隐藏“d-none”或类似的内容。我正在使用 React。

 <span className="product__tag">{prod.tag1}</span>
 <span className="product__tag">{prod.tag2}</span>
 <span className="product__tag">{prod.tag3}</span>

Answer 1

您可以通过 CSS 使用:empty选择器：span:empty{display:none;}如果在其他地方重置，请注意选择器的特殊性span display。

Answer 2

你可以试试&nbsp;{prod.tag1 && <span className="product__tag">{prod.tag1}</span>}

Answer 3

方法一：-&nbsp;<span className="product__tag" style={{display: (prod.tag1 ? 'block':'none')}}>&nbsp; &nbsp;{prod.tag1}&nbsp;</span>&nbsp;方法2：-&nbsp;{prod.tag1 && <span className="product__tag">{prod.tag1}</span>}方法3：-{prod.tag1 ? <span className="product__tag">{prod.tag1}</span>: null}

Answer 4

内联样式一个好方法是使用内联样式。您可以检查您的数据是否为空，并根据该情况显示：无。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"&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;...&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<span className={checkData}>{prod.tag1}</span><span className={checkData}>{prod.tag2}</span><span className={checkData}>{prod.tag3}</span>...&nbsp;css.product__tag__hide{display: none;}