条件逻辑jsx反应答案

【问题标题】：Conditional logic jsx react条件逻辑jsx反应
【发布时间】：2017-02-21 17:02:28
【问题描述】：

我试图在我的 jsx 视图中对 className 应用多个条件。然而它不会让我。

它只听第一个条件。

className={usernameFocus ? "toggled" : "" || usernameValidated ? "validated" : ""}

我尝试了几种组合：

className={usernameFocus ? "toggled" : "" + usernameValidated ? "validated" : ""}

如何完成多个条件以将类名添加到我的元素？

【问题讨论】：

【解决方案1】：

我认为您在应用两者时缺少类名之间的空格，括号也有助于多个嵌套条件语句。

试试这个：

className={(usernameFocus ? "toggled" : "") + " " + (usernameValidated ? "validated" : "")}

【讨论】：

【解决方案2】：

您的操作顺序搞错了。将您的单独条件放在括号中。此外，您可以像这样短路类评估：

className={(usernameFocus && "toggled") + " " + (usernameValidated && "validated")}

如果你觉得特别花哨，也可以使用模板字符串：

className={`${usernameFocus && "toggled"} ${usernameValidated && "validated"}`}

如果您经常这样做（多个布尔值），请查看 Jed Watson 官方推荐的 classnames 模块。 Link.

有了它，你可以这样做：

var usernameClasses = classNames({
  'validated': usernameValidated,
  'toggled': usernameFocus
});

className={usernameClasses};

【讨论】：