如何在reactjs中显示具有多个条件的div答案

【问题标题】：how to display a div with multiple conditions in reactjs如何在reactjs中显示具有多个条件的div
【发布时间】：2021-01-29 22:24:51
【问题描述】：

我正在尝试根据某些条件显示一个 div，但它无法正常工作。我有一些像管理员和访客这样的用户以及更多的个人资料，还有一个与管理员相关的条件让我们假设该条件 isBusy(boolean)。

我只想为管理员和访客显示特定的 div。当 isBusy 为真时，对于管理员这是我的代码-

{(user.isAdmin() && this.props.isBusy) || user.isVisitor() &&
<div>
some more code
</div>
}

我想在用户是管理员并且 isBusy = true 或用户是访问者时显示此 div。 这些条件无法正常工作。

提前致谢

【问题讨论】：

【解决方案1】：

您可以将所有条件添加到一个括号中并尝试。

{((user.isAdmin() && this.props.isBusy) || user.isVisitor()) &&
<div>
some more code
</div>
}

【讨论】：

【解决方案2】：

{(user.isAdmin() && this.props.isBusy) || user.isVisitor() && (
    <div>
        // code
    </div>
)}

【讨论】：

【解决方案3】：

括号中的错误，详见示例 CodeSandbox example

【讨论】：

【解决方案4】：

首先，尝试调试每个条件的值（例如isAdmin()、isBusy 和isVisitor()）以查看它们给出的值。它不呈现您想要的 div 的原因可能是不满足其中任何一个条件。因此，调试可以让您了解代码中发生了什么。

如果所有值都正确，则使用三元运算符尝试以下操作：

{(user.isAdmin() && this.props.isBusy) || user.isVisitor() ? (
 <div>
  // code
 </div>
) : null
}

【讨论】：