在 react.js 中使用 map 時為每個項目更改 backgroundColor

Question

我從 api 獲取對象，我獲取它並映射到它並返回<p></p> ，如下所示：

data.map((item) => <p> {item.p} </p> )

我的問題是：我怎樣才能給每個段落一個不同的背景顏色？

Answer 1

您可以通過以下方式為每個元素制作不同的 colors

data.map((item) => <p style={{ backgroundColor: `#${((Math.random() * 0xfffff * 1000000).toString(16)(.slice(0,6)}` }}> {item.p} </p> )

Answer 2

您可以為每個項目關聯一個顏色變量

data.map((item) => <p style={{backgroundColor: item.color}}>{item.p}</p>);

或者你可以隨機做

data.map((item, index) => <p style={{backgroundColor: `#43f${index}FC`}}>{item.p}</p>);