react实现显示隐藏div的方法：1、在函数式组件内容中通过“{showoverlay? ():null}”实现div的显示隐藏；2、在业务逻辑中判断visible的取值，并通过在组件样式中设置“style={{ display: `${visible ? '' : 'none'}` }}”即可。
本教程操作环境：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 ? '' : 'none'}` }}>
组件内容
</div>推荐学习：《react视频教程》
以上就是react怎么实现显示隐藏div的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
272
