javascript 如何在React中显示/隐藏组件或html元素？

Posted 2021-05-03

// ...

state = {
  show: true
}

// ...

render: function() {
    let content = null
    
    if (this.state.show) {
      <div>
        This will be hidden if you set <tt>props.shouldHide</tt> 
        to something truthy.
      </div> 
    }
    
    return (
      <h1>The Title</h1>
      { content }
      <footer>Foooter</footer>
    );
}

// Source https://www.udemy.com/react-the-complete-guide-incl-redux/learn/v4/t/lecture/8091068?start=0

<style type="text/css">
    .hidden { display:none; }
</style>

render: function() {
    return (
      <div className={this.props.shouldHide ? 'hidden' : ''}>
        This will be hidden if you set <tt>props.shouldHide</tt> 
        to something truthy.
      </div>
    );
}

// ...

state = {
  show: true
}

// ...

render: function() {
    return (
      { this.state.show ?
        <div className={this.props.shouldHide ? 'hidden' : ''}>
          This will be hidden if you set <tt>props.shouldHide</tt> 
          to something truthy.
        </div> : null
      }
    );
}

// Source: https://www.udemy.com/react-the-complete-guide-incl-redux/learn/v4/t/lecture/8091064?start=0