React条件渲染

react条件渲染的形式有4种。常用的为&& 和 三目运算

元素变量控制

它可以帮助你有条件地渲染组件的一部分，而其他的渲染部分并不会因此而改变。这个变量必须是状态变量，才可以同步更新页面UI。案例可以参考官方案例。

&&运算符

示例，如果rendererOutput条件是 true，&& 右侧的元素就会被渲染，如果是 false，React 会忽略并跳过它不进行渲染。

<div className={style['query-tip']}>
    {
     rendererOutput && (
        <Output renderer={rendererOutput} />
     )
  }
</div>

三目运算符

用法和Js里三目运算的用法一样xxx ? true : false

render() {
  const { orderByInv } = this.state;
  return (
    <div>
      {orderByInv === 'Y'
        ? <OrderByInv />
        : <OrderByClaim/>
      }
    </div>
  );
}

阻止组件渲染

可以让 render 方法直接返回 null，而不进行任何渲染。