3 个条件 - 三元条件链 JavaScript 反应答案

【问题标题】：3 conditions - ternary conditional chains JavaScript react3 个条件 - 三元条件链 JavaScript 反应
【发布时间】：2022-01-02 04:43:43
【问题描述】：

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

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

【问题讨论】：

c.status 的可能值是多少？似乎它的大小写与发布的代码不一致。它应该是“活着”还是“活着”？
"Alive" "Dead" "unknown" 我只希望Alive和Dead是绿色和红色，如果碰巧有其他随机状态可以默认为紫色

标签： javascript reactjs conditional-statements conditional-operator

【解决方案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]}

【讨论】：

【解决方案2】：

在第二种情况下，您使用的是“未知”，它始终为真，因此输出将始终为“紫色”。执行以下操作。

let a = { status: "Alive" };
let b = { status: "dead" };
let c = { status: "unknown" };

console.log(
  a.status === "Alive" ? "green" : a.status === "unknown" ? "purple" : "red"
);

console.log(
  b.status === "Alive" ? "green" : b.status === "unknown" ? "purple" : "red"
);

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

【讨论】：