(相关资料图)

本教程操作环境：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中文网其它相关文章！

推荐内容