条件逻辑 jsx 反应

Question

我试图在我的 jsx 视图中对 className 应用 1 个以上的条件。但是它不会让我。

它只听第一个条件。

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

我试过几种组合：

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

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

Answer 1

我认为您在 class 名称之间缺少一个 space，因为当两者都应用时，括号也有助于多个嵌套条件语句。

试试这个：

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

Answer 2

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

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

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

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

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

有了它，你可以这样做：

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

className={usernameClasses};