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

Question

我正在努力研究嵌套的三元操作。

colorVariant 的值为 'success'、'info'、'error' 或 'default'。

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

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

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

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

Answer 2

props = {colorVariant: ''} // just here for the demo

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

console.log('color:', color); // purple

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

Answer 3

您需要检查变量。如果不是第一个非空字符串是真实的。

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

Answer 4

您必须在 : 之后重复条件而不是

    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'

此刻你得到 'gray' 因为：

props.colorVariant 不同于 success 然后它转到 info 但是没有条件所以它是真的（因为一个字符串被转换为 booleaqn 总是真的）然后你得到 gray

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

Nested ternary operator not returning as expected

javascript

conditional-operator