条件逻辑jsx做出反应

Question

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

它只听第一个条件。

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

我尝试了几种组合：

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

我怎样才能完成多个条件以将classNames添加到我的元素中？

Answer 1

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

试试这个：

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

Answer 2

您的操作顺序混乱。将您的单独条件放在括号中。此外，您可以将类评估短路：

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

如果您觉得有点花哨，还可以使用模板字符串：

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

如果你这么做（多个布尔），请看看Jed Watson正式推荐的classnames模块。 Link

有了它，你可以这样做：

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

className={usernameClasses};