如何在使用条件运算符时显示两个 nav.link？

Question

我的代码：

<Nav>
    {
     user?.uid
     ?
     <button onClick={() => handleSignout()}>Sign Out</button>
     :
     <Nav.Link as={Link} to='/login'>Login</Nav.Link>
     <Nav.Link as={Link} to='/signup'>Sign Up</Nav.Link>
     }
</Nav>

Answer 1

用 React 片段或任何空标签包裹它们。它应该可以正常工作。

 { 
user?.uid ? <button onClick={() => handleSignout()}>Sign Out :
<React.Fragment> 
  <Nav.Link as={Link} to='/login'>Login</Nav.Link> 
  <Nav.Link as={Link} to='/signup'>Sign Up</Nav.Link>
</React.Fragment>
 }

Answer 2

{ 
  user?.uid ? 
      <button>Sign Out</button> 
      :
      <> 
         <Nav.Link>Login</Nav.Link> 
         <Nav.Link>Sign Up</Nav.Link>
      </>
}

Answer 3

我觉得应该是这样的

 { 
user?.uid ? <button onClick={() => handleSignout()}>Sign Out  </button> :
<React.Fragment> 
  <Nav.Link as={Link} to='/login'>Login</Nav.Link> 
  <Nav.Link as={Link} to='/signup'>Sign Up</Nav.Link>
</React.Fragment>
 }

或者您可以使用空标签代替 React.Fragment，例如：

  { 
    user?.uid ? <button onClick={() => handleSignout()}>Sign Out </button>:
    <> 
      <Nav.Link as={Link} to='/login'>Login</Nav.Link> 
      <Nav.Link as={Link} to='/signup'>Sign Up</Nav.Link>
    </>
     }

如何在使用条件运算符时显示两个 nav.link？

How I can show two nav.link while using a conditional operator?

conditional-operator

conditional-statements

reactjs