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元素的详细内容。