条件渲染不显示 - ReactJS答案

【问题标题】：Conditional rendering not displaying - ReactJS条件渲染不显示 - ReactJS
【发布时间】：2019-11-30 03:21:24
【问题描述】：

我有一个退出按钮，我只想在用户登录时显示。

我为此创建了一个函数，并将该函数包含在 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>

【问题讨论】：

标签： javascript reactjs conditional-rendering

【解决方案1】：

你必须像 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>
  );
}

【讨论】：

【解决方案2】：

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>

【讨论】：