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

Question

我正在尝试围绕嵌套的三元操作进行思考。

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

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

目前，我已将该值设置为“默认”，因为我希望看到它一直到最后，但就目前而言，返回的颜色是灰色的。

有人可以解释为什么会这样吗？

Answer 1

您必须在每个条件下进行比较，例如：

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';