react 怎麼刪除dom元素

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(&#39;../image/joinwechat/s.png&#39;)}></img>:showMap=&#39;&#39;//这是一张二维码图
        return (
            < >
                 <button onClick={this.onClickS}>点我删除二维码</button>
                 <button onClick={this.onClick}>点我恢复二维码</button>
                    {showMap}
            </>
        )
    }
}
export default Page2;

推薦學習：《react影片教學》

以上是react 怎麼刪除dom元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！