3 个条件 - 三元条件链 JavaScript React

Question

所以我只是在玩 rick and Morty API，我从来没有做过有 3 个条件的三元。Mozilla 文档说可以，但它对我不起作用。下面的代码显示了状态为live的角色为绿色，其余为紫色。我希望活着是绿色，死了是红色，未知是紫色。如果有人好奇的话，我正在使用 chakra UI。我究竟做错了什么？

<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]}