react删除dom元素的方法:1、利用render生命周期来定义一个DOM节点变量;2、通过“onClickS(){this.setState({deled:false})}”实现删除dom元素即可。
本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。
react 怎么删除dom元素?
react 删除(隐藏)和增加(显示)元素 DOM节点
通常 删除(隐藏)和增加(显示) 很多人用css的display的none样式来实现 这样有个缺点F12直接改样式就可以,非常不安全 我们应该实现真正的删除和增加 但是在react看来也可以叫渲染和不渲染这个组件这个dom
react有removeChild方法 但是没有appendChild方法 so我们就只能通过render 结合state方法来更新页面了
也就是利用render生命周期来定义一个变量 DOM节点变量
然后通过state来更新是否显示的值
import React from 'react'; class Page2 extends React.Component { constructor(props) { super(props); this.state={ deled:true } this.onClick=this.onClick.bind(this) this.onClickS=this.onClickS.bind(this) } //恢复 onClick(){ this.setState({ deled:true }) } //删除 onClickS(){ this.setState({ deled:false }) } render() { const { deled} = this.state; var showMap=''; //三元表达式判断deled的值来更新showMap deled==true?showMap=<img src={require('../image/joinwechat/s.png')}></img>:showMap=''//这是一张二维码图 return ( < > <button onClick={this.onClickS}>点我删除二维码</button> <button onClick={this.onClick}>点我恢复二维码</button> {showMap} </> ) } } export default Page2;
推荐学习:《react视频教程》
以上就是react 怎么删除dom元素的详细内容,更多请关注php中文网其它相关文章!
已抢15982个
抢已抢48959个
抢已抢4112个
抢已抢1752个
抢已抢2085个
抢已抢3433个
抢