reactjs - 基于先前值的 ReactJS 表条件样式

Question

我有一个使用 Material-UI Table 组件的 React JS 应用程序，如下所示：

我需要更改同一日期的最后一行和另一个日期的第一行之间的边框样式，例如 betweenDate A和Date B这样：

我创建表格的代码只是一张法线贴图：

<TableCell>
                <Typography style={{ fontSize: 16 }}>{new Date(row.date).toLocaleDateString().slice(0, 10)}</Typography>
            </TableCell>
            <TableCell><Typography noWrap={true} style={{ fontSize: 16 }}>{row.user}</Typography></TableCell>
            <TableCell><Typography style={{ fontSize: 16 }}>{row.duration}h</Typography></TableCell>
            <TableCell><Typography style={{ fontSize: 16 }}>{row.description}</Typography></TableCell>
            <TableCell style={{ width: 35 }} align="left">
                <IconButton
                    className={classes.iconButton}
                    style={{ marginRight: 3 }}
                    onClick={() => openWorklogModalForEdit(row.id, row.date, row.duration, row.description, row.project_id, row.user_id, row.project, row.clientName)}>
                    <EditIcon className={classes.actionsButtonIcon} />
                </IconButton>
            </TableCell>
            <TableCell style={{ width: 65 }} align="right" >
                <IconButton
                    className={classes.iconButton}
                    onClick={() => deleteWorklog(row.id)}>
                    <DeleteIcon className={classes.actionsButtonIcon} />
                </IconButton>
            </TableCell>
        </TableRow>

感谢您的时间！

标签： reactjshtml-tablematerial-ui

Answer 1

通过应用映射，您可以像这样添加检查

 rows.map((row,index)=>{
      if(index !== 0)?
          <td className={row.date === rows[index-1].date? 'blackLine' : 'orangeLine'} </td>
      :
       <td className='black'} ></td>
    })