三元運算符中的更多值？

Question

我設置了一個導航組件來為登錄的用戶和登錄的用戶返回不同的導航設置。我需要為管理員用戶添加一個。 我將為管理員提供另一個常量。 我該怎么做？ 據我所知，三元運算符不允許我添加另一個值。

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

您可以嵌套條件運算符，但可讀性可能會降低。 例如，如果您創建一個片段adminLoggedIn類似loggedIn和notLoggedIn ，和你有一個isAdmin布爾變量，你可以使用語法：

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

不過，您可能更願意避免使用條件運算符：

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