react条件渲染

条件渲染的几种形式

//第一种，在render里面判断
**三元运算符**
  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>
    );
  }

&&短路运算符

image.png

//第二种，独立出来写变量

  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>
    );

//第三种，写成组件的方法
  getLogin = (isList,arr) => {
    //从props解构赋值
    // 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>
    );
  }
}

//第四种，独立成函数式组件（注意需要从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解构赋值
  // console.log(props)
  // let {arr,isList} = props
  if(isList) {
    return arr.map((item,i) => { return  <Person key={i} item={item}></Person> })
  } else {
    return null;
  }
}

总结：
根据组件代码的复杂程度，可以依次选择。