时间戳

首页 > 解决方案 > 三元运算符中的更多值？

javascript - 三元运算符中的更多值？

问题描述

我设置了一个导航组件，为登录的用户和登录的用户返回不同的导航设置。我需要为管理员用户再添加一个。我将为管理员提供另一个 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>
);
}
}

标签： javascriptreactjsconditional-operator

解决方案

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

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

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

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

推荐阅读