条件渲染

在函数组件的渲染部分是整个组件索要渲染输出的最终整合部分，在实际 React 项目中，一个组件也常常会遇到需要根据一定条件输出不同的渲染输出的要求，这就需要使用到条件渲染的功能。

条件渲染的主要目标就是在组装渲染输出的时候，即时决定内容是否需要保留。虽然可以使用比较复杂的方式实现，例如提前使用if来对条件进行判断，获取所需要输出的组件片段。

function ConditionRenderer(props) {
  let button;
  if (props.isLoggedIn) {
    button = <button>登出</button>;
  } else {
    button = <button>登入</button>;
  }

  return <div>{button}</div>;
}

上面示例中的这种组装形式还是十分复杂的，尤其是在组件中存在大量需要判断是否输出的组件片段的时候。所以常用的方式还是使用三元操作符在return部分做即时的判断和输出。例如上面这个示例可以精简成以下这个样子。

function ConditionRenderer(props) {
  return (
    <div>
      {props.isLoggedIn ? <button>登出</button> : <button>登入</button>}
    </div>
  );
}

如果组件中不需要这么复杂的判断，只需要根据指定条件决定一个元素是否输出，那么可以直接借助 Javascript 中的&&操作符来完成。例如：

function ConditionRenderer(props) {
  return <div>{props.isLoggedIn && <button>登出</button>}</div>;
}

如果需要阻止整个组件的输出，只需要让return语句返回null即可。