So steuern Sie das Anzeigen und Ausblenden in React

Methoden zum Steuern der Anzeige und des Ausblendens in React: 1. Steuern Sie, ob Elemente über Statusvariablen gerendert werden sollen. 2. Steuern Sie das Anzeigeattribut über den Stil. 3. Wechseln Sie den Klassennamen dynamisch.

Die Betriebsumgebung dieses Tutorials: Windows7-System, React17-Version, Dell G3-Computer.

Methoden zum Steuern der Anzeige und des Ausblendens in React:

1. Verwenden Sie Statusvariablen, um zu steuern, ob Elemente gerendert werden sollen.

Ähnlich wie bei Vues v-ifv-if

方法是通过变量来控制是否加载元素的，如果变量为false，内容就直接不会渲染的。

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

2、通过 style控制 display 属性

类似于 vue 中的 v-show

-Methode werden Variablen zur Steuerung verwendet ob geladen werden soll Wenn die Variable für Elemente falsch ist, wird der Inhalt nicht direkt gerendert.

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

2. Steuern Sie das Anzeigeattribut über den Stil

Ähnlich wie v-show in vue

Steuern Sie das Anzeigen und Ausblenden von Elementen über das Anzeigeattribut

//.css文件
.is-show{
    display:none
}
//.js文件
class Demo extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            isShow:true
        }
    }
    render(){
        return (
            <div>
              // 写法一 
              <div className={this.state.isShow?&#39;old&#39;:&#39;old is-show&#39;}>显示的元素</div>
              // 写法二
              <div className={`${this.state.isShow?&#39;&#39;:&#39;is-show&#39;} old`}>显示的元素</div>
            </div>
        )
    }
}

3. Wechseln Sie dynamisch den Klassennamen Übergeben Sie className, um den Klassennamen so umzuschalten, dass Elemente angezeigt und ausgeblendet werden.

rrreee🎜Verwandte kostenlose Lernempfehlungen: 🎜Javascript🎜(Video)🎜🎜

Das obige ist der detaillierte Inhalt vonSo steuern Sie das Anzeigen und Ausblenden in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!