react实现显示隐藏div的方法:1、在函数式组件内容中通过“{showoverlay? (dc6dce4a544fdca2df29d5ac0ea9906b16b28748ea4df4d9c2150843fecfba68):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中文网其他相关文章!