根據它在反應中的價值通過數組映射時更改卡片的顏色？

Question

我想根據當前插槽的值更改卡的顏色，該值是數組中的 object。 因此，當我通過卡片進行映射時，我想根據值更改卡片的背景顏色。 我該怎么做？ 我目前的方法似乎不起作用。

slots.map(slot => 
          <Card key ={slot._id} style={{backgroundColor:slot.OccupiedStatus?'black':'teal'}}>
            
            <Typography>{slot.category}</Typography>
          </Card>

Answer 1

由於Card是 React 組件，因此在您的情況下， style不被視為屬性，而是將傳遞給Card組件的道具。

您可以在Card組件中捕獲該style道具並使用它。

const Card = (style, ...otherProps) => {
    return <div style={style} >hello</div>
}