小鸡啄米之React条件渲染

简易条件渲染

最简单的条件渲染就是采用if函数来决定渲染哪个组件

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

该示例中，通过判断isLoggedIn状态来决定渲染哪个组件

变量渲染

简单理解：将jsx语法的组件赋值给一个变量

if (isLoggedIn) {
    button = <LogoutButton onClick={this.handleLogoutClick} />;
  } else {
    button = <LoginButton onClick={this.handleLoginClick} />;
  }

逻辑表达式渲染

即采用 表达式 && 组件方式来决定渲染情况，若表达式为true则渲染组件，否则不渲染
示例：{this.state.flag && <Alert />}

三元运算渲染

采用三元表达式来渲染，相当于简易版if渲染
示例：this.state.flag ? <Alert /> : null

注意：当渲染位置为null时，表示不进行渲染！
如：

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }
  return (
    <div className="warning">
      警告!
    </div>
  );
}
<WarningBanner warn={this.state.warn}/>