Javascript 条件呈现未显示-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>
}
  }

constifloggedin=（）=>{
如果（！localStorage.hasOwnProperty（'token'））{
返回空
}否则{
返回

}
}

作为回报，我正试图以这种方式呈现它：

        <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

是一个函数，因此需要调用它

 <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（）使用

ifloggedin（）{
如果（！localStorage.hasOwnProperty（'token'））{
返回null；
}否则{
返回(


);
}

 ifloggedin() {
if (!localStorage.hasOwnProperty('token')) {
  return null;
} else {
  return (
    <li>
      <a href="#contact" className="Contact" onClick={logout} to={'/'}>
        Log Out
      </a>
    </li>
  );
}