条件渲染

wsitch if 三元运算 && ||都是条件判断.下面通过几个例子来说明 react 中的条件渲染

需要注意的一点在 react 组件中,{}代表的是表达式,是求值的语句,不是对象.

只要在标签中用属于 js 的内容，都需要写在{}里。

  isShow = () => {
    // if的使用
    if (this.state.show) {
      return <div>我一向都很可以的</div>
    }
    return <p>算了</p>
  }

  loading = (str) => {
    switch(str) {
      case 1:
        return <div>我可以的</div>
      default:
        return <div>asidhiahsiud</div>
    }
  }

  render() {
    return <div>
      {
        // if
        this.isShow()
      }
      {
        // 三元运算法
        this.state.show ? <div>我还是很可以的</div>:<p>算了</p>
      }
      {
        // && and ||
        5 > 20 || this.state.show && <div>我就是可以的</div>
      }
      {
        // switch
        this.loading()
      }
    </div>
  }