Javascript 条件逻辑jsx react

我试图在jsx视图中对类名应用不止一个条件。然而，它不会让我

它只听第一个条件

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

我尝试了几种组合：

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

---

如何实现多个条件才能将类名添加到元素中？

我认为在应用这两个类名时，两个类名之间缺少一个空格，并且括号有助于使用多个嵌套的条件语句

试试这个：

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

---

你的行动顺序搞混了。将单独的条件放在括号中。此外，您还可以像这样简化课堂评估：

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

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

className={usernameClasses};

如果您特别喜欢，还可以使用模板字符串：

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

如果你经常使用多个布尔函数，那么看看Jed Watson官方推荐的类名模块

有了它，您可以这样做：

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

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

className={usernameClasses};

---

若usernameValidated为false，但usernameFocus为true，那个么返回值是否切换为false？正确。除非您指定false作为实际类，尽管这不应该是一个问题。我还建议使用变量，而不是在属性中使用内联逻辑。