- 此问题在此处已有答案**:
How can I change css of the first element with map function in React?(1个答案)
16天前关闭。
这篇文章是编辑和提交审查3天前。
我在typeScript中使用React。
我想通过Map获取的数组数据来更改数组[0]的背景色。
是否有方法确定它是否是数组中的第一个?
这是数组列表
数组:[{"创建日期":" 2022/12/27 ","状态":" aaa ","操作员ID ":" 001 "},{"创建日期":" 2022/12/28 ","状态":" bbb ","操作员ID ":" 002 "}]
in JSX
Array.map((item, index) => {
let bgColorHeader = '#FFCCCC'
// ★ I want to change the background color only at the beginning of the array.<br>
let bgColorHeader = '';
let bgColorData = '';
let bgColorHeaderLatest = '#BEFF97'
let bgColorDataLatest= '#DCFDD8'
let bgColorHeaderOther = '#808080'
let bgColorDataOther = '#D3D3D3'
index === 0 ? bgColorHeader = bgColorHeaderLatest : gColorHeaderOther;
index === 0 ? bgColorData = bgColorDataLatest : bgColorDataOther;
return (
<TableBody key={index}>
<TableRow>
<TableCell
sx = {{backgroundColor: {bgColorHeader} }}
>
<TableCell
sx = {{backgroundColor: {bgColorData} }}
>
)
})
2条答案
按热度按时间kkbh8khc1#
您可以使用索引
如果index = 0,则这是数组的第一个元素
kpbpu0082#
你可以这样做
let bgColorHeader = index === 0 ? '#FFFFFF' : '#FFCCCC'
添加到ur代码