如何根据 React 中的 3 个条件更改表格行颜色答案

【问题标题】：How to change the table row color based on 3 conditions in React如何根据 React 中的 3 个条件更改表格行颜色
【发布时间】：2020-05-24 23:00:05
【问题描述】：

我是新手。我想根据某些条件更改表格行。就像我有一个名为 deadLine 的值。因此，如果 deadLine 日期和当前日期之间的差异为 2，则表格行应为绿色，如果差异为 1，则表格行应为黄色，如果为 0 或 -ve，则表格行应为红色。

注意：deadLine 是一个字符串，格式为 dd/MM/yyyy

我如何在反应中实现这一目标？我在 stackOverflow 中看到了一些示例，但没有帮助。

我有这样的代码

<TableBody>
                {
                this.props.result.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row,i) =>(


                  <TableRow  key={i} >

                    <TableCell component="th"   >
                     <Typography variant="h4"> {row.a} </Typography>
                    </TableCell>
                    <TableCell align="left" > <Typography variant="h4">{row.b}</Typography>  </TableCell>
                    <TableCell align="left" > <Typography variant="h4"> {row.c} </Typography> </TableCell>
                    <TableCell align="left" > <Typography variant="h4"> {row.d} </Typography> </TableCell>
                    <TableCell align="left" > <Typography variant="h4"> {row.deadline} </Typography> </TableCell>
                  </TableRow>


                ))}
</TableBody>

【问题讨论】：

标签： reactjs tablerow

【解决方案1】：

首先，定义样式的 CSS

.green {} // green style
.yellow {} // yellow style
.red{} // red style

然后为你的组件定义你的逻辑方法

.....
dateDiff = (deadLine) => {
  return (Date.parse(deadLine) - Date.now()) / (24 * 60 * 60 * 1000);
}
rowColor = (deadline) => {
   if (this.dateDiff(deadline) >= 2) {
      return 'green';
   } else if (this.dateDiff(deadline) >= 1) {
      return 'yellow';
   } else {
      return 'red';
   }
}
.....
render(){
 ......
 <TableBody>
{
this.props.result.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row,i) =>(


<TableRow className={this.rowColor(row.deadline)}  key={i} >

  <TableCell component="th"   >
    <Typography variant="h4"> {row.a} </Typography>
  </TableCell>
  <TableCell align="left" > <Typography variant="h4">{row.b}</Typography>  </TableCell>
  <TableCell align="left" > <Typography variant="h4"> {row.c} </Typography> </TableCell>
  <TableCell align="left" > <Typography variant="h4"> {row.d} </Typography> </TableCell>
  <TableCell align="left" > <Typography variant="h4"> {row.deadline} </Typography> </TableCell>
</TableRow>


))}

}

【讨论】：

【解决方案2】：

您可以在TableRow 上应用一个类或样式属性：

<TableRow style={{backgroundColor:'red'}}> 将改变行的背景。

最好用类来做，所以在你的 css 文件中定义你的三个类：

.green{background-color: green;}
.yellow{background-color: yellow;}
.red{background-color: red;}

然后您可以创建一个函数，该函数将根据截止日期返回您需要申请的类。类似的东西：

const getBackgroundColor = deadline => {
    return conditionToRed ? 'red' : conditionToYellow ? 'yellow' : 'green';
}

在您的 jsx 中，您将执行以下操作：

<TableRow className={getBackgroundColor()}>

【讨论】：