Wie man in der Reaktion ein- und ausblendet

So zeigen Sie in React an und verbergen es: 1. Verwenden Sie Zustandsvariablen, um zu steuern, ob Elemente gerendert werden sollen, ähnlich wie [v-if] in Vue. 2. Steuern Sie das Anzeigeattribut über den Stil, ähnlich wie [v-show] in Vue 3. Durch Klassennamen dynamisch wechseln.

Die Betriebsumgebung dieses Tutorials: Windows10-System, React16, dieser Artikel gilt für alle Computermarken.

React Show-Hide-Methode:

Methode eins:

Die erste Methode besteht in diesem Beispiel darin, die Variable showElem zu verwenden, um zu steuern, ob das Element geladen werden soll. Wenn showElem falsch ist, wird der Inhalt nicht gerendert direkt.

class Demo extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            showElem:true
        }
    }
    render(){
        return (
            <div>
                {
                    this.state.showElem?(
                        <div>显示的元素</div>
                    ):null
                }
            </div>
        )
    }
}

Methode 2:

Diese Methode ist sehr einfach, sie dient dazu, das Anzeigen und Ausblenden von Elementen über das Anzeigeattribut zu steuern.

class Demo extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            showElem:'none'
        }
    }
    render(){
        return (
            <div style={{display:this.state.showElem}}>显示的元素</div>
        )
    }
}

Methode 3:

Ausblenden durch Klassennamen wechseln, um Elemente anzuzeigen und auszublenden.

class Demo extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            showElem:true
        }
    }
    render(){
        return (
            <div>
                {/* 写法一 */}
                <div className={this.state.showElem?&#39;word-style&#39;:&#39;word-style hide&#39;}>显示的元素</div>
                {/* 写法二 */}
                <div className={`${this.state.showElem?&#39;&#39;:&#39;hide&#39;} word-style`}>显示的元素</div>
            </div>
        )
    }
}

Es ist zu beachten, dass diese Methoden auch Unterschiede in der Verwendung aufweisen:

• Methode 1 eignet sich nicht für die häufige Steuerung des Ein- und Ausblendens, da Elemente neu gerendert werden, was leistungsintensiver ist. In diesem Fall ist die zweite oder dritte Methode zur Steuerung über die Anzeige sinnvoller.

• Methode 1 eignet sich für Seiten mit hoher Sicherheit, z. B. Benutzerinformationsseiten, auf denen je nach Benutzerebene unterschiedliche Inhalte angezeigt werden. Wenn Sie zu diesem Zeitpunkt Methode 1 oder 2 verwenden, kann der Benutzer diese weiterhin sehen Öffne das Netzwerk, weil Die Seite wird noch gerendert, nur ausgeblendet. Die erste Methode besteht darin, die DOM-Elemente der Benutzerinformationen nicht direkt darzustellen, um die Sicherheit zu gewährleisten.

Verwandte kostenlose Lernempfehlungen: JavaScript(Video)

Das obige ist der detaillierte Inhalt vonWie man in der Reaktion ein- und ausblendet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!