So verbergen Sie Elemente basierend auf Bedingungen in React

Implementierungsmethode: 1. Verwenden Sie die Statusvariable, um zu steuern, ob das Element gerendert werden soll. Wenn der Wert falsch ist, wird der Inhalt nicht direkt gerendert. 2. Steuern Sie das Anzeigeattribut über den Stil und blenden Sie das Element aus, wenn der Attributwert vorhanden ist ist keine; 3. Verwenden Sie className. Schalten Sie hide dynamisch um, um Elemente anzuzeigen und auszublenden.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, React18-Version, Dell G3-Computer.

Reagieren Es gibt drei Möglichkeiten, das Anzeigen und Ausblenden von Elementen zu steuern: React控制元素显示和隐藏的方法有三种方法：

• 第一种是通过state变量来控制是否渲染元素，类似vue中的v-if。

• 第二种是通过style控制display属性，类似vue 中的v-show。

• 第三种是通过动态切换className。

方法一：

第一种方法是通过此例中showElem变量来控制是否加载元素的，如果showElem为false，内容是直接不会渲染的。

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

方法二：

这个方法很简单，就是通过display属性来控制元素显示和隐藏。

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

方法三：

通过className切换hide

• Die erste Möglichkeit ist über state Variable zur Steuerung, ob Elemente gerendert werden sollen, ähnlich wie v-if in vue.

• Die zweite Methode besteht darin, das Attribut display über style zu steuern, ähnlich wie v-show in <code>vue</ code> .

• Die dritte Methode besteht darin, className dynamisch zu wechseln.

Methode 1:

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

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>
        )
    }
}

Methode 2:

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

Methode 3: 🎜

🎜Schalten Sie hide durch className, um Elemente anzuzeigen und auszublenden. 🎜🎜rrreee🎜Methode 1 eignet sich nicht für die häufige Steuerung des Ein- und Ausblendens, da dabei 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, wenn er die Seite öffnet Netzwerk, weil die Seite noch gerendert, nur ausgeblendet ist. Die erste Methode besteht darin, die DOM-Elemente der Benutzerinformationen nicht direkt darzustellen, um die Sicherheit zu gewährleisten. 🎜🎜【Verwandte Empfehlungen: 🎜Redis-Video-Tutorial🎜, 🎜Programmierunterricht🎜】🎜

Das obige ist der detaillierte Inhalt vonSo verbergen Sie Elemente basierend auf Bedingungen in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!