react如何完美实现显示隐藏div

发布时间：2023-07-15 11:30:27 所属栏目：教程来源：转载

导读： 　　为大家详细介绍“react如何实现显示隐藏div”，内容详细，步骤清晰，细节处理妥当，希望这篇“react如何实现显示隐藏div”文章能帮助大家解决疑惑，下面跟着小编的

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

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

　　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 ? '' : 'none'}` }}>

　　   组件内容

　　</div>

（编辑：源码网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!