如何有条件地包装此react组件
如何有条件地包装此react组件
提问于 2019-11-16 00:16:24
我只是在想，当我有条件地呈现一个组件时，如何避免重复这段代码。
到目前为止，我得到的是一个连接到redux的导航栏组件，它的状态是(isAuth or not)，如果是，它将使用logout()呈现div，否则将使用logout()呈现div。
现在这种方法不是很好，而且它是重复的。我遇到过这个https://blog.hackages.io/conditionally-wrap-an-element-in-react-a8b9a47fab2，它基本上允许你在不复制代码的情况下有条件地呈现组件，但我无法理解它。对不起，我现在只是在学习如何做出反应。
如果你能告诉我如何使用这个，或者如果我可以尝试另一种方法，那将是非常有帮助的
谢谢
function Navbar({ isAuth, logOut }) {
if(isAuth) {
return(
<div className="navbar">
<a> link A</a>
<a> link B</a>
<a> link C</a>
<a> link D</a>
<button onClick={() => logOut()} > Logout </button>
</div>
)
}
return (
<div className="navbar">
<a> link A</a>
<a> link B</a>
<a> link C</a>
<a> link D</a>
<button> Login </button>
</div>
)
}
const mapStateToProps = ({ login }) => {
return {
isAuth: login.isAuthenticated
};
};
export default connect(
mapStateToProps,
{ logOut }
)(Navbar);回答 1
Stack Overflow用户
回答已采纳
发布于 2019-11-16 00:19:47
只需让按钮有条件地渲染即可；
function Navbar({ isAuth, logOut }) {
return(
<div className="navbar">
<a> link A</a>
<a> link B</a>
<a> link C</a>
<a> link D</a>
{isAuth ? <button onClick={() => logOut()} > Logout </button> : <button> Login </button>}
</div>);
}
}
const mapStateToProps = ({ login }) => {
return {
isAuth: login.isAuthenticated
};
};
export default connect(
mapStateToProps,
{ logOut }
)(Navbar);您可以将基本条件放在render/returns中，用大括号- {}括起来。基本上，如果isAuth是真实的，则呈现注销，否则登录。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58880917
复制相关文章
相似问题
腾讯云开发者
