在反應條件下渲染兩個組件

Question

目前正在開發一個簡單的導航欄組件。 以下是我的代碼：

{isLoggedIn ? 
                <Navbar.Brand ><Link to="/" style={{ textDecoration: 'none' }} onClick={() => dispatch(logoutUser())}>Logout</Link></Navbar.Brand> 
            : 
                <Navbar.Brand ><Link to="/registration" style={{ textDecoration: 'none' }}>Register</Link></Navbar.Brand>   
                <Navbar.Brand ><Link to="/login" style={{ textDecoration: 'none' }}>Login</Link></Navbar.Brand>
}

當用戶登錄時，我希望出現一個注銷按鈕，而當他們未登錄時，我希望同時出現注冊和登錄按鈕。 但是當 isLoggedIn 為假時，我不能同時做這兩個。 有什么辦法可以做到這一點？

謝謝！

Answer 1

{isLoggedIn ? <Navbar.Brand ><Link to="/" style={{ textDecoration: 'none' }} onClick={() => dispatch(logoutUser())}>Logout</Link></Navbar.Brand> 
            : <div>
                  <Navbar.Brand ><Link to="/registration" style={{ textDecoration: 'none' }}>Register</Link></Navbar.Brand>   
                  <Navbar.Brand ><Link to="/login" style={{ textDecoration: 'none' }}>Login</Link></Navbar.Brand>
              </div>
}

編輯：如下所示，也可以在片段之間進行包裝。