Javascript 嵌套三元运算符未按预期返回

我正试着把我的头绕在我的头上

colorVariant的值为“成功”、“信息”、“错误”或“默认”

props.colorVariant == 'success' ? 'green' : 'info' ? 'gray' : 'error' ? 'red' : 'default' ? 'black' : 'purple'

目前，我已经将该值设置为“default”，因为我希望看到它一直保持到最后，但目前为止，返回的颜色是灰色的

---

有人能解释一下为什么会这样吗？

您必须在每种情况下进行比较，例如：

props.colorVariant == 'success'
  ? 'green'
  : props.colorVariant === 'info'
    ? 'gray'
    : props.colorVariant === 'error'
       ? // ...

但在这里使用对象更有意义：

const colorsByVariant = {
  success: 'green',
  info: 'gray',
  error: 'red',
  default: 'black',
};
const color = colorsByVariant[props.colorVariant] ?? 'purple';

props={colorVariant:'}//就在这里演示一下
const color=props.colorVariant=='success'？'绿色'：
props.colorVariant==“信息”？”灰色'：
props.colorVariant=='错误'？'红色'：
props.colorVariant=='default'？'黑色“：“紫色”；
console.log（'color:'，color）；//紫色

您需要对照变量进行检查。如果不是，则第一个非空字符串是真实的

props.colorVariant === 'success'
    ? 'green'
    : props.colorVariant === 'info'
        ? 'gray'
        : props.colorVariant === 'error'
            ? 'red'
            : props.colorVariant === 'default'
                ? 'black'
                : 'purple'

---

您必须在

：

而不是

    props.colorVariant == 'success' ? 'green' : 'info' ? 'gray' : 'error' ? 'red' : 'default' ? 'black' : 'purple'

您应该执行以下操作

props.colorVariant == 'success' ? 'green' : props.colorVariant == 'info' ? 'gray' : props.colorVariant == 'error' ? 'red' : props.colorVariant == 'default' ? 'black' : 'purple'

此时你会变得“灰色”，因为：

props.colorVariant

与

success

不同，然后它会转到

info

，但没有条件，所以它是真的（因为字符串被强制转换为booleaqn总是真的），然后你得到了

灰色

你应该使用带有键/值的贴图（对象）