react如何实现显示隐藏div

本文小编为大家详细介绍“React如何实现显示隐藏div”，内容详细，步骤清晰，细节处理妥当，希望这篇“react如何实现显示隐藏div”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

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

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

第一种方法

函数式组件

代码如下（示例）：

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

类组件

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

代码如下（示例）：

//构造函数中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 ? '' : 'none'}` }}>   组件内容</div>

读到这里，这篇“react如何实现显示隐藏div”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注编程网精选频道。