[JavaScript知识库]react条件渲染

在React 中，你可以创建不同的组件来封装各种你需要的行为。然后，依据应用的不同状态，只渲染对应状态下的部分内容。
React中的条件渲染和javascript中的一样，使用javascript运算符if或者条件运算符去创建元素来表现当前的状态，然后让React根据他们来更新UI。

使用if…else…语句

class App extends React.Component {
  state = {
    isLogin: true
  }
  logout = () => {
    this.setState({
      isLogin: false
    })
  }
  login = () => {
    this.setState({
      isLogin: true
    })
  }
  render() {
    const { isLogin } = this.state;
    const Button = () => {
      if(isLogin) {
        return <button onClick={this.logout}>退出</button>
      }else{
        return <button onClick={this.login}>登录</button>
      }
    }
    
    return (
      <div>
        <Button />
      </div>
    )
  }
}
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

使用switch…case…语句

render() {
    const { isLogin } = this.state;
    const Button = () => {
      switch(isLogin) {
        case true : 
          return <button onClick={this.logout}>退出</button>
        case false :
          return <button onClick={this.login}>登录</button>
        default :
          return null;
      }
    }
    
    return (
      <div>
        <Button />
      </div>
    )
  }

与运算符 &&

通过花括号包裹代码，你可以在jsx中嵌入任何表达式。这也包括javascript中的逻辑与(&&)运算符。它可以很方便的进行元素的条件渲染。

class App extends React.Component {
  state = {
    message : ['a', 'b', 'c', 'd', 'e']
  }
  render() {
    const { message } = this.state
    return (
      <div>
         {message.length > 0 && <div>you have {message.length} unread message.</div>}
      </div>
    )
  }
}


ReactDOM.render(
  <App />,
  document.getElementById('root')
);

三目运算符

另一种内联条件渲染的方法是使用javascript中的三目运算符 condition ? true : false。其实这也是编写if…else…的一种更简洁的方法

class App extends React.Component {
  state = {
    isLogin : true
  }
  logout = () => {
    this.setState({
      isLogin: false
    })
  }
  login = () => {
    this.setState({
      isLogin: true
    })
  }
  render() {
    const { isLogin } = this.state;
    const Button = () => {
      if(isLogin) {
        return <button onClick={this.logout}>退出</button>
      }else{
        return <button onClick={this.login}>登录</button>
      }
    }
    return (
      <div>
        <Button />
        <div>当前isLogin状态是{isLogin?'true':'false'}</div>
      </div>
    )
  }
}


ReactDOM.render(
  <App />,
  document.getElementById('root')
);