3個條件-三元條件鏈javascript反應

Question

所以我只是在玩瑞克和莫蒂api，我從來沒有做過3個條件的三元組。 Mozilla docs 說你可以，但它對我不起作用。 下面的代碼顯示狀態為綠色的字符，rest 為紫色。 我要活着是綠色，死了是紅色，未知是紫色。 如果有人好奇，我正在使用脈輪 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]}

Answer 2

在第二種情況下，您使用的是“未知”，這始終是正確的，因此 output 將始終為“紫色”。 請執行下列操作。

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