So implementieren Sie das Klicken zum Ausblenden und Anzeigen in React

So implementieren Sie die Click-to-Hide-Anzeige in React: 1. Verwenden Sie einen Stil zum Ein- und Ausblenden, z. B. „{{display:this.state.isShow?'block':'none'}}“; Verwenden Sie einen ternären Operator, um Ausblenden und Anzeigen zu implementieren, z. B. „this.state.isShow?(...):(...)“ 3. Verwenden Sie Kurzschlusslogik, um Elemente anzuzeigen und auszublenden, z. B. „this“. .state.isShow&&

...< ;/div>".

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

Wie implementiert man die Click-to-Hide-Anzeige in React?

Verwendung der Methoden zum Anzeigen und Ausblenden von Elementen in React

In React haben wir vier häufig verwendete Methoden zum Anzeigen und Ausblenden von Elementen. In Vue verwenden wir v-if oder v-show um das Ausblenden und Anzeigen von Elementen anzuzeigen

Im Folgenden werden die Methoden zum Ausblenden und Anzeigen von Elementen in React vorgestellt

Die erste Methode: Verwenden Sie den Stil zum Anzeigen und Ausblenden

<script type="text/babel">
class App extends React.Component {
    state={
        isShow:false,
    }
    check=()=>{
        this.setState({
            isShow:!this.state.isShow
        })
    }
  render() {
    return (
      <div>
        {/*第一种方式，用style来显示隐藏*/}
        <button style={{display:this.state.isShow?&#39;block&#39;:&#39;none&#39;}}>张云龙</button>
        <button style={{display:this.state.isShow?&#39;none&#39;:&#39;block&#39;}}>秦霄贤</button>
        <button onClick={this.check}>点击切换</button>
      </div>
    )
  }
}
ReactDOM.render(<App/>,document.getElementById('root'))

Block bedeutet Anzeige, keiner bedeutet ausgeblendet

Der zweite Typ : Verwenden Sie den ternären Operator

<script type="text/babel">
class App extends React.Component {
    state={
        isShow:false,
    }
    check=()=>{
        this.setState({
            isShow:!this.state.isShow
        })
    }
  render() {
    return (
      <div>

        {/*第二种方法，用三元运算符*/}
            {
            this.state.isShow?(<div>秦霄贤</div>):(<div>张云龙</div>)
            }
        <button onClick={this.check}>点击切换</button>
      </div>
    )
  }
}
ReactDOM.render(<App/>,document.getElementById('root'))

Der dritte Typ: Elemente durch Kurzschlusslogik anzeigen und ausblenden

<script type="text/babel">
class App extends React.Component {
    state={
        isShow:false,
    }
    check=()=>{
        this.setState({
            isShow:!this.state.isShow
        })
    }
  render() {
    return (
      <div>
        {/*第三种方式*/}
          {
            this.state.isShow && <div>秦霄贤</div>
        }
        {
            !this.state.isShow && <div>张云龙</div>
        }
        <button onClick={this.check}>点击切换</button>
      </div>
    )
  }
}
ReactDOM.render(<App/>,document.getElementById('root'))

Der vierte Typ: Funktionsform

<script type="text/babel">
class App extends React.Component {
    state={
        isShow:false,
        love:'秦霄贤'
    }
    check=()=>{
        this.setState({
            isShow:!this.state.isShow
        })
    }

    loves=(key)=>{
        switch(key){
            case '秦霄贤':
                return <div>秦霄贤</div>
            case '张云龙':
                return <div>张云龙</div>
        }   
    }

  render() {
    let ok=this.loves(this.state.love)
    return (
      <div>
        {/*第四种函数形式*/}
        {ok}
        <button onClick={this.check}>点击切换</button>
      </div>
    )
  }
}
ReactDOM.render(<App/>,document.getElementById('root'))

Empfohlenes Lernen: „Video-Tutorial reagieren“

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