在反应条件下渲染两个组件答案

【问题标题】：render two components in react conditional在反应条件下渲染两个组件
【发布时间】：2021-12-13 21:02:27
【问题描述】：

目前正在开发一个简单的导航栏组件。以下是我的代码：

{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 为假时，我不能同时做这两个。有什么办法吗？

谢谢！

【问题讨论】：

顺便说一句，我不建议您在 .js 中设置组件样式，它很快就会让人头疼...
好的，谢谢！我会做一个 CSS 来代替。

标签： javascript reactjs react-redux

【解决方案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>
}

编辑：如下所示，也可以在片段之间进行换行。

【讨论】：

您也可以将这两个按钮包装在 Fragment 中。像 .....两个按钮 ....>
谢谢 Mamoon Ahmed！尽管答案确实有效，但它使样式变得怪异。您的回答根本不影响样式，所以我改用 Fragments 。但是非常感谢 tony_merguez。