在 className `if` 语句中反应`or` 条件答案

【问题标题】：React `or` condition in className `if` statement在 className `if` 语句中反应`or` 条件
【发布时间】：2021-07-04 01:35:57
【问题描述】：

我有一个 React 应用程序，想在满足一个条件或另一个条件时更改 CSS 类。我该怎么做？

所以，如果validation 或validationNoExist 是false，那么CSS 类应该是input-form-validation-wrong，如果两者都正确则选择第一个类。

这是我的代码：

<input type="email"  className={validation || validationNoExist ? 'input-form' : 'input-form-validation-wrong'} placeholder="E-Mail" />

【问题讨论】：

标签： css reactjs conditional-operator

【解决方案1】：

这可能只是对逻辑运算符进行分组的问题，因此它们被评估为三元条件测试的一个单元。他们都需要为真三元返回“输入形式”。

<input
  type="email"
  className={(validation && validationNoExist) ? 'input-form' : 'input-form-validation-wrong'}
  placeholder="E-Mail"
/>

console.log((false && false) ? 'input-form' : 'input-form-validation-wrong');
console.log((true && false) ? 'input-form' : 'input-form-validation-wrong');
console.log((false && true) ? 'input-form' : 'input-form-validation-wrong');
console.log((true && true) ? 'input-form' : 'input-form-validation-wrong');

【讨论】：

【解决方案2】：

&lt;input type="email"  className={(validation || validationNoExist) ? 'input-form' : 'input-form-validation-wrong'} placeholder="E-Mail" /&gt;

【讨论】：