react如何刪除dom元素

本篇內(nèi)容主要講解“react如何刪除dom元素”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“react如何刪除dom元素”吧!

react刪除dom元素的方法：1、利用render生命周期來定義一個DOM節(jié)點變量；2、通過“onClickS(){this.setState({deled:false})}”實現(xiàn)刪除dom元素即可。

react 刪除（隱藏）和增加（顯示）元素 DOM節(jié)點

通常 刪除（隱藏）和增加（顯示） 很多人用css的display的none樣式來實現(xiàn) 這樣有個缺點F12直接改樣式就可以，非常不安全 我們應該實現(xiàn)真正的刪除和增加 但是在react看來也可以叫渲染和不渲染這個組件這個dom

react有removeChild方法 但是沒有appendChild方法 so我們就只能通過render 結(jié)合state方法來更新頁面了

也就是利用render生命周期來定義一個變量 DOM節(jié)點變量

然后通過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元素”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學習！