react 怎么删除dom元素-前端问答-PHP中文网

react 怎么删除dom元素

藏色散人

发布： 2022-12-27 09:39:31

原创

3027人浏览过

react删除dom元素的方法：1、利用render生命周期来定义一个DOM节点变量；2、通过“onClickS(){this.setState({deled:false})}”实现删除dom元素即可。

react 怎么删除dom元素

本教程操作环境：Windows10系统、react18.0.0版、Dell G3电脑。

react 怎么删除dom元素？

react 删除（隐藏）和增加（显示）元素 DOM节点

通常删除（隐藏）和增加（显示）很多人用css的display的none样式来实现这样有个缺点F12直接改样式就可以，非常不安全我们应该实现真正的删除和增加但是在react看来也可以叫渲染和不渲染这个组件这个dom

react有removeChild方法但是没有appendChild方法 so我们就只能通过render 结合state方法来更新页面了

企业软件介绍主页html模板

一款多用途的企业软件前端HTML模板。IT软件服务公司网站响应式单页模板。基于CSS、JS、HTML模块化原则创建的。如果您的站点不需要所有元素，那么可以轻松地删除不必要的组件。模板的代码干净，友好，注释良好。这使得编辑和自定义模板变得很容易。

350

查看详情

也就是利用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中文网其它相关文章！