条件判断

• if else
• 三元表达式

• 逻辑运算符 && ||

  render() {
  const blackBtn = <button className="btn">blackBtn</button>
  const whiteBtn = <button className="btn">whiteBtn</button>
  if (this.state.theme === 'black') {
    return blackBtn;
  } else {
    return whiteBtn;
  }
  }

  return <div>{ this.state.theme === 'black' ? blackBtn : whiteBtn }</div>
  

  return <div>{ this.state.theme === 'black' && blackBtn }</div>
  

  列表渲染

• map

• key ```jsx this.state = { list: [ {

  id: 'id-1',
  title: 'title1'
  

  }, {

  id: 'id-2',
  title: 'title2'
  

  }, {

  id: 'id-3',
  title: 'title3'
  

  } ] }

// 这里的key和vue的key一样，必填 render() { return

{ this.state.list.map((item, index) => { return
• {item.title}

})}