javascript - 条件逻辑jsx react

Question

我试图在 jsx View 中对 className 应用超过 1 个条件。然而它不会让我。

它只听第一个条件。

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

我尝试了几种组合:

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

如何完成多个条件来将 classNames 添加到我的元素？

Answer 1

您的操作顺序混淆了。将您的单独条件放在括号中。另外，您可以像这样缩短类评估:

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

如果您觉得更奇特，您还可以使用模板字符串:

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

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

有了它，你可以这样做:

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

className={usernameClasses};