为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

萧十郎 2023-08-24 20:58:40
当数据为空时,如何隐藏“d-none”或类似的内容。我正在使用 React。 <span className="product__tag">{prod.tag1}</span>  <span className="product__tag">{prod.tag2}</span>  <span className="product__tag">{prod.tag3}</span>
查看完整描述

4 回答

?
MYYA

TA贡献1868条经验 获得超4个赞

您可以通过 CSS 使用:empty选择器:

span:empty{display:none;}

如果在其他地方重置,请注意选择器的特殊性span display


查看完整回答
反对 回复 2023-08-24
?
拉莫斯之舞

TA贡献1820条经验 获得超10个赞

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



查看完整回答
反对 回复 2023-08-24
?
拉丁的传说

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}


查看完整回答
反对 回复 2023-08-24
?
有只小跳蛙

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;

}


查看完整回答
反对 回复 2023-08-24
  • 4 回答
  • 0 关注
  • 179 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信