[英]Conditional rendering not displaying - ReactJS
我有一个注销按钮,我只想在用户登录时显示。
我已经为此创建了一个函数,并将函数包含在react的返回部分中,但它不起作用。
这是功能:
const ifloggedin = () => {
if (!localStorage.hasOwnProperty('token')) {
return null
} else {
return <li><a href="#contact" className="Contact" onClick={logout} to={"/"}>Log Out</a></li>
}
}
这就是我试图渲染它的方式:
<div className="content">
<li><a href="#hiw" className="Hiw" to={"/about"}>HOW IT WORKS</a></li>
<li><a href="#pricing" className="Price" to={"/pricing"}>PRICING</a></li>
<li><Link className="Faq" to={"/Faq"}>FAQ</Link></li>
<li><a href="#contact" className="Contact" to={"/contact"}>CONTACT</a></li>
{ifloggedin}
</div>
ifloggedin
是一个函数,所以你需要调用它。
<div className="content">
<li><a href="#hiw" className="Hiw" to={"/about"}>HOW IT WORKS</a></li>
<li><a href="#pricing" className="Price" to={"/pricing"}>PRICING</a></li>
<li><Link className="Faq" to={"/Faq"}>FAQ</Link></li>
<li><a href="#contact" className="Contact" to={"/contact"}>CONTACT</a></li>
{ifloggedin()}
</div>
你必须将ifloggedin称为ifloggedin(),因为它是一个箭头函数。 但在你的情况下,你正在使用它进行条件渲染,所以不需要为此编写箭头函数。
您可以将其写为普通函数并使用ifloggedin()
ifloggedin() {
if (!localStorage.hasOwnProperty('token')) {
return null;
} else {
return (
<li>
<a href="#contact" className="Contact" onClick={logout} to={'/'}>
Log Out
</a>
</li>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.