Bagaimana untuk memadam elemen dom dalam tindak balas

Cara memadamkan elemen dom dalam tindak balas: 1. Gunakan kitaran hayat pemaparan untuk menentukan pembolehubah nod DOM 2. Padamkan elemen dom melalui "onClickS(){this.setState({deled:false})} "Itu sahaja.

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 18.0.0, komputer Dell G3.

Bagaimana untuk memadamkan elemen dom dalam tindak balas?

tindak balas pemadaman (sembunyikan) dan tambah (tunjukkan) unsur nod DOM

Biasanya padam (sembunyikan) dan tambah (tunjukkan) ramai orang menggunakan tiada gaya paparan css untuk mencapai ini Terdapat kelemahan. F12 hanya boleh menukar gaya secara langsung Ia adalah sangat tidak selamat >react mempunyai kaedah removeChild tetapi tidak mempunyai Kaedah appendChild jadi kami hanya boleh mengemas kini halaman melalui pemaparan digabungkan dengan kaedah keadaan

Iaitu, gunakan kitaran hayat render untuk mentakrifkan pembolehubah nod DOM yang berubah-ubah

Pembelajaran yang disyorkan: "

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;

Atas ialah kandungan terperinci Bagaimana untuk memadam elemen dom dalam tindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!