基于先前值的 ReactJS 表条件样式答案

【问题标题】：ReactJS Table conditional styling based on previous value基于先前值的 ReactJS 表条件样式
【发布时间】：2021-01-11 19:19:41
【问题描述】：

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

我需要更改同一日期的最后一行和另一个日期的第一行之间的边框样式，例如在Date 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>

感谢您的宝贵时间！

【问题讨论】：

标签： reactjs html-table material-ui

【解决方案1】：

您可以在使用.map 时为不同日期的第一行添加类。简单演示请参考this code snippet。

想法：

当您使用map 从数组构造表时，语法为

let newArray = arr.map(callback(currentValue[, index[, array]]) {
  // return element for newArray, after executing something
}[, thisArg]);

文档：link

然后在地图回调主体中，您可以访问当前值和索引。然后您可以检查当前项目是新“组”中的第一个还是新日期。如果为 true，您可以向该行添加一个自定义类（正如演示所做的那样）。
然后就可以使用css来添加边框，这样就可以实现'基于先前值的条件样式'。

【讨论】：

该代码 sn-p 非常棒，不知何故让我走上了正确的道路，但我现在确实有另一个问题：通过检查我的代码中的 index > 0 && value !== value[index-1] 是否会像 index > 0 && row.date !== row.date[index-1] 它确实没有得到前一个 row.date 而是得到了我的 index-1 字符 row.date 值。我该如何克服这个问题？
row.date !== row.date[index-1] 对我来说听起来不正确，如果 row 是您当前的项目，那么我们应该将右侧与 array 中的最后一个项目进行比较，而不是 @987654332 @ 但array[index - 1]
@VladPopa 在我的代码中是value != data[index - 1] 而不是value !== value[index-1] :)
我尝试了!= 和!== 但结果相同:(
@マークさん谢谢！最后我写了：row.date !== initialArray[index-1].date

【解决方案2】：

如果您可以通过在某些元素上添加或删除类来更改样式，这很容易做到。

<td className={shouldBeBlack ? 'black' : 'orange'} ></td>

因此，您可以根据 shouldBeBlack 的值设置表格数据或任何元素的 css 属性。只是取决于你的风格。如果有一些道具可以传递给材质 ui 元素，那么可以为相同的 c=kind 制作相同的三元方程。

【讨论】：

你说得很好，但它并不完全适用于我需要的东西，因为我不知道如何在映射时设置和检查shouldBeBlack 状态

【解决方案3】：

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

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

【讨论】：

感谢您抽出宝贵时间，作为已接受答案的 cmets，我想出了同样的事情：D