條件渲染的幾種形式

//第一種，在render里面判斷
**三元運(yùn)算符**
  render() {
    console.log('render')
    return (
      <div className="App" onClick={this.handleClick}>
          xxx
          <ul>
              {this.state.isList? this.state.arr.map((item,i) => {
                return <Person key={i} item={item}></Person>
            }):null}
          </ul>
      </div>
    );
  }

&&短路運(yùn)算符

image.png

//第二種，獨(dú)立出來(lái)寫(xiě)變量

  render() {
    console.log('render')
    let isList = this.state.isList;
    let arr = this.state.arr;
    let comp = null;
    if(isList) {
      comp = arr.map((item,i) => {
        return <Person key={i} item={item}></Person>
      })
    } else {
      comp = null
    }
    return (
      <div className="App" onClick={this.handleClick}>
          xxx
          <ul>
              { comp }
          </ul>
      </div>
    );

//第三種，寫(xiě)成組件的方法
  getLogin = (isList,arr) => {
    //從props解構(gòu)賦值
    // console.log(props)
    // let {arr,isList} = props
    if(isList) {
      return arr.map((item,i) => { return  <Person key={i} item={item}></Person> })
    } else {
      return null;
    }
  }
  render() {
    console.log('render')
    let isList=this.state.isList
    let arr=this.state.arr
    return (
      <div className="App" onClick={this.handleClick}>
          xxx
          <ul>
              {this.getLogin(isList,arr)}
          </ul>
      </div>
    );
  }
}

//第四種，獨(dú)立成函數(shù)式組件（注意需要從props從獲取傳參）
 render() {
    console.log('render')
    return (
      <div className="App" onClick={this.handleClick}>
          xxx
          <ul>
              <Login arr={this.state.arr} isList={this.state.isList} />
          </ul>
      </div>
    );
  }
}
function Login({arr,isList}) {
  //從props解構(gòu)賦值
  // console.log(props)
  // let {arr,isList} = props
  if(isList) {
    return arr.map((item,i) => { return  <Person key={i} item={item}></Person> })
  } else {
    return null;
  }
}

總結(jié)：
根據(jù)組件代碼的復(fù)雜程度，可以依次選擇。