三元运算符中的更多值？

Question

我有一个导航组件设置为 return 为登录用户和登录用户设置不同的导航。我需要为管理员用户再添加一个。我将为管理员准备另一个 const。我该怎么做呢？据我所知，三元运算符不允许我添加另一个值。

render() {

const { isAuthenticated } = this.props.auth;

const notLoggedIn = (
  <div id='header'>
    <div class='container-fluid'>
      <div id='logo' class='pull-left'>
        <h1>
          <Link className='scrollto' to='/'>
            The Sports Bet Leader
          </Link>{' '}
        </h1>
      </div>

      <nav id='nav-menu-container'>
        <button
          class='navbar-toggler'
          type='button'
          data-toggle='collapse'
          data-target='#navbarNav'
          aria-controls='navbarNav'
          aria-expanded='false'
          aria-label='Toggle navigation'
        >
          <span className='navbar-toggler-icon'></span>
        </button>
        <ul class='nav-menu'>
          <li class='menu-active'>
            <Link className='' to='/'>
              Home
            </Link>
          </li>
          <li>
            <Link className='' to='/register'>
              Register
            </Link>{' '}
          </li>
          <li>
            <Link className='' to='/login'>
              Login
            </Link>{' '}
          </li>
        </ul>
      </nav>
    </div>
  </div>
);

const loggedIn = (
  <div id='header'>
    <div class='container-fluid'>
      <div id='logo' class='pull-left'>
        <h1>
          <Link className='scrollto' to='/'>
            The Sports Bet Leader
          </Link>{' '}
        </h1>
        {/* <!-- Uncomment below if you prefer to use an image logo --> */}
        {/* <a href="#intro"><img src="img/logo.png" alt="" title="" /></a> */}
      </div>

      <nav id='nav-menu-container'>
        <button
          class='navbar-toggler'
          type='button'
          data-toggle='collapse'
          data-target='#navbarNav'
          aria-controls='navbarNav'
          aria-expanded='false'
          aria-label='Toggle navigation'
        >
          <span className='navbar-toggler-icon'></span>
        </button>
        <ul class='nav-menu'>
          <li class='menu-active'>
            <Link className='' to='/'>
              Home
            </Link>
          </li>
          <li>
            <Link className='' to='/dashboard'>
              Picks
            </Link>{' '}
          </li>
          <li>
            <Link className='' onClick={this.logout} to='/'>
              Logout
            </Link>{' '}
          </li>
        </ul>
      </nav>
    </div>
  </div>
);
return (
  <div>
    {isAuthenticated ? loggedIn : notLoggedIn}
  </div>
);
}
}

Answer 1

您可以嵌套条件运算符，尽管可读性可能会降低。例如，如果您创建类似于 loggedIn 和 notLoggedIn 的片段 adminLoggedIn，并且您有一个 isAdmin 布尔变量，则可以使用语法：

return (
  <div>
    {
      isAdmin
        ? adminLoggedIn
        : isAuthenticated
          ? loggedIn
          : notLoggedIn
    }
  </div>
);

不过，您可能更愿意避免使用条件运算符：

return (
  <div>
    {
      (() => {
        if (isAdmin) return adminLoggedIn;
        if (isAuthenticated) return loggedIn;
        return notLoggedIn;
      })()
    }
  </div>
);

三元运算符中的更多值？

More values in Ternary operator?

javascript

conditional-operator

reactjs