使用 CSS/JavaScript 進行嵌套條件樣式

Question

在我的 React 應用程序中，我有一個樣式化的框。 該組件包含 state。 我想根據顏色改變盒子的顏色。

例如，如果 selectedID = 1，粉紅色，如果 selectedID = 2，綠色等。

我嘗試過這樣的事情但沒有成功：

<InformationContainer
// style={ {backgroundColor: selectedID < 2  || selectedID > 2 ? '#ebedfb':'#ffe5e5'}}
style={ {backgroundColor: 
selectedID < 4 ? '#ffe5e5':
selectedID < 3  || selectedID > 2 ? '#414c97':
selectedID < 3  || selectedID > 3 ? '#65bb2c':
selectedID < 3  || selectedID > 3 ? 'yellow':
'white'
}}
>

我想為所有 4 個盒子和 state 的部件提供這個。

Answer 1

對我來說， selectedID 似乎總是小於四，所以它永遠不會通過第一次檢查。 以及你的一些檢查沒有意義。 像這樣的東西會更好。

style={ {backgroundColor: 
    selectedID == 4 ? '#ffe5e5':
    selectedID == 3 ? '#414c97':
    selectedID == 2 ? '#65bb2c':
    selectedID == 1 ? 'yellow':
    'white'

Answer 2

如果您不是嵌套三元組的忠實粉絲（我不是），您可以在一個小的 function 中提取該邏輯。

getBgColor(selectedID) {
  if(selectedID === 4) return '#ffe5e5';
  if(selectedID === 3) return '#414c97';
  if(selectedID === 2) return '#65bb2c';
  if(selectedID === 1) return '#yellow';
  return 'white';
}
// ***
<InformationContainer
  style={ {backgroundColor: getBgColor(selectedID)} }
>