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

Question

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

或者您可以改用查找 table - 这样可读性更好。

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

// ...

colorSceme={colorsByStatus[c.status]}

Answer 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"
);

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

3 conditions - ternary conditional chains JavaScript react

javascript

reactjs

conditional-statements

conditional-operator