So löschen Sie Dom-Elemente in React

So löschen Sie Dom-Elemente in React: 1. Verwenden Sie den Render-Lebenszyklus, um eine DOM-Knotenvariable zu definieren. 2. Löschen Sie Dom-Elemente über „onClickS(){this.setState({deled:false})}“.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 18.0.0, Dell G3-Computer.

Wie lösche ich Dom-Elemente in React?

React löscht (versteckt) und fügt Element-DOM-Knoten hinzu (zeigt an).

Normalerweise verwenden viele Leute den None-Stil der CSS-Anzeige, um dies zu erreichen. Es gibt einen Nachteil, den F12 direkt ändern kann Der Stil ist sehr unsicher. Wir sollten echtes Löschen und Hinzufügen implementieren, aber in React kann man es auch als Rendern oder Nicht-Rendern dieser Komponente bezeichnen Aktualisieren Sie die Seite durch Rendern in Kombination mit der Statusmethode

Das heißt, Sie verwenden den Render-Lebenszyklus, um eine variable DOM-Knotenvariable zu definieren

und aktualisieren dann den Wert, ob sie über den Status angezeigt werden soll

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;

Empfohlenes Lernen: „

"

Das obige ist der detaillierte Inhalt vonSo löschen Sie Dom-Elemente in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!