React条件渲染实例讲解使用

import './App.css';
import React from "react";
class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      signIn: false
    }
  }
  increase(){
    this.setState({
      signIn: !this.state.signIn
    })
  }
  render(){
    let ligin = this.state.signIn?<span>已登录</span>:<span>未登录</span>
    return (
      <div className="App">
        { ligin }
        <button onClick = { this.increase.bind(this) }>{ this.state.signIn?"取消登录":"登录" }</button>
      </div>
    )
  }
}
export default App;

constructor(props){
super(props);
  this.state = {
    signIn: false,
    list: []
  }
}

render(){
  let ligin = this.state.signIn?<span>已登录</span>:<span>未登录</span>
  return (
    <div className="App">
      { ligin }
      <div>
        {
          this.state.list.map((item,index) =>{
            return <p key = {index}>{ item }</p>
          })
        }
      </div>
      <button onClick = { this.increase.bind(this) }>{ this.state.signIn?"取消登录":"登录" }</button>
    </div>
  )
}

render(){
 let ligin = this.state.signIn?<span>已登录</span>:<span>未登录</span>
 return (
   <div className="App">
     { ligin }
     {
       this.state.list.length > 0?
       <div>
         {
           this.state.list.map((item,index) =>{
             return <p key = {index}>{ item }</p>
           })
         }
       </div>
       :
       <div>暂无数据....</div>
     }
     <button onClick = { this.increase.bind(this) }>{ this.state.signIn?"取消登录":"登录" }</button>
   </div>
 )
}