react如何删除dom元素

本篇内容主要讲解“react如何删除dom元素”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“react如何删除dom元素”吧!

成都创新互联主要从事成都网站制作、成都做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务怀宁,十载网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792

react删除dom元素的方法:1、利用render生命周期来定义一个DOM节点变量;2、通过“onClickS(){this.setState({deled:false})}”实现删除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如何删除dom元素”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

网页标题:react如何删除dom元素
网页地址:https://www.cdcxhl.com/article44/ghcshe.html

成都网站建设公司_创新互联,为您提供企业建站网站维护网站制作网站内链网站建设外贸建站

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

成都定制网站建设