首页  >  文章  >  web前端  >  react怎么实现显示隐藏div

react怎么实现显示隐藏div

藏色散人
藏色散人原创
2023-01-18 13:58:152692浏览

react实现显示隐藏div的方法:1、在函数式组件内容中通过“{showoverlay? (dc6dce4a544fdca2df29d5ac0ea9906b16b28748ea4df4d9c2150843fecfba68):null}”实现div的显示隐藏;2、在业务逻辑中判断visible的取值,并通过在组件样式中设置“style={{ display: `${visible ? '' : 'none'}` }}”即可。

react怎么实现显示隐藏div

本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。

react怎么实现显示隐藏div?

react函数式组件下如何隐藏和显示一个组件(两种方法)

第一种方法

1.函数式组件

代码如下(示例):

//函数式组件内容中
 const [showoverlay, setshowoverlay] = useState(false);
//渲染时,运算符
return(
     <>
     {showoverlay? (<div>显示或隐藏</div>):null}
     </>
)

2.类组件

网上举例基本都是类组件下的操作。

代码如下(示例):

//构造函数中
constructor(props) {
    super(props);
    this.state = {showWarning: true}
  }
 //渲染时
      <>
  { this.state.showWarning?
        <div>显示或隐藏</div> :null
        }
      </>

第二种方法

//在业务逻辑中判断visible的取值
const [visible, setVisible] = useState<boolean>(false);
//组件样式中设置
<div className="overlaydiv" ref={overlayContainerRef} style={{ display: `${visible ? &#39;&#39; : &#39;none&#39;}` }}>
   组件内容
</div>

推荐学习:《react视频教程

以上是react怎么实现显示隐藏div的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn