如何使用 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

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




Answer 3

方法一：-

 <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}

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"

        

...

        

<span className={checkData}>{prod.tag1}</span>

<span className={checkData}>{prod.tag2}</span>

<span className={checkData}>{prod.tag3}</span>

... 

css

.product__tag__hide{

display: none;

}