如何根据 React 中的 3 个条件更改 table 行颜色

Question

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

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

我怎样才能在反应中实现这一点？我在 Whosebug 中看到了一些示例，但没有帮助。

我有这样的代码

<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>

Answer 1

您可以只在 TableRow 上应用 class 或样式属性:

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

最好用 classes 来做，所以在 css 文件中定义三个 classes :

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

然后您可以创建一个函数，根据截止日期，return 您需要申请 class。像 :

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

在你的 jsx 中你会做类似的事情：

<TableRow className={getBackgroundColor()}>

Answer 2

首先，定义 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>


))}

}

如何根据 React 中的 3 个条件更改 table 行颜色

How to change the table row color based on 3 conditions in React

tablerow

reactjs