javascript - 3 条件 - 三元条件链 JavaScript react

Question

所以我只是在玩瑞克和莫蒂 API，我从来没有用 3 个条件做过三元运算。 Mozilla 文档说你可以，但它对我不起作用。下面的代码显示了状态为绿色的字符，其余为紫色。我想活着是绿色，死了是红色，未知是紫色。如果有人好奇的话，我正在使用脉轮用户界面。我做错了什么？

<Badge
  colorScheme={ c.status === "Alive" ? "green"
      : "unknown" ? "purple"
      : "red"
  }
>
  {c.status}
</Badge>

Answer 1

您的符号混淆了。用括号分组，你的代码等同于

c.status === "Alive" ? "green"
      : ("unknown" ? "purple" : "red")

你需要的是

c.status === 'Alive'
  ? 'green'
  : c.status === 'unknown' ? 'purple' : 'red'

或者您可以改用查找表 - 它的可读性更高。

const colorsByStatus = {
  Alive: 'green',
  unknown: 'purple',
  dead: 'red'
};

// ...

colorSceme={colorsByStatus[c.status]}