Bedingtes Rendering reagieren, Elemente ausblenden und anzeigen

• '?' Symbol ternäre Operation

​{ this.state.isShow ? <h2>既然是要成为一名正真的爱坤，那么请大声地喊出我们的爱坤口号！</h2>:null }

• '&&' und Symbolbeurteilung

{ this.state.isShow && <h2>我们的口号是唱跳rap篮球！</h2> }

• Ausblenden und Anzeigen durch die Anzeige des CSS-Attributs von className oder style

  constructor(props){
    super(props)
    this.state={
      isShow:true,
      H2style:{display: 'none'}
    }
  }

<h2 style={this.state.isShow ? null:this.state.H2style}>小黑子终于漏出鸡脚了吧</h2>

• Darüber hinaus können Sie auch DangerlySetInnerHTML für das Einfügen von Rich Text zum Ein- und Ausblenden verwenden.Hinweis: Das Einfügen von Rich Text ist äußerst gefährlich

 <h2 dangerouslySetInnerHTML={ {__html: this.state.isShow ? '正真的爱坤没有口号，真正的爱坤都是爱在心里的':null} }></h2>

---

Codebeispiel:

import React, { Component } from 'react'

export default class App extends Component {

  constructor(props){
    super(props)
    this.state={
      isShow:true,
      H2style:{display: 'none'}
    }
  }

  render() {
    return (
      <div>
        <button onClick={()=>{this.ikunFun()}}>点击</button>
        { this.state.isShow ? <h2>既然是要成为一名正真的爱坤，那么请大声地喊出我们的爱坤口号！</h2>:null }
        { this.state.isShow && <h2>我们的口号是唱跳rap篮球！</h2> }
        <h2 style={this.state.isShow ? null:this.state.H2style}>小黑子终于漏出鸡脚了吧</h2>
        <h2 dangerouslySetInnerHTML={ {__html: this.state.isShow ? '正真的爱坤没有口号，真正的爱坤都是爱在心里的':null} }></h2>
      </div>
    )
  }
  
  ikunFun(){
    this.setState({
      isShow:!this.state.isShow
    })
  }

}