道具更新时，反应更新表单元格(td)背景动画

Question

我有一个从道具中获取数据的表。我希望每次它得到一个新道具时，单元格(td(的背景动画都会发生变化。此外，我创建了一个动画背景来显示表格单元格已更新，但它只是在创建每个单元格时第一次显示背景，然后在道具更新时不显示背景。

import React from 'react'
import { TableRow, TableCell } from '@material-ui/core/'
import { makeStyles } from '@material-ui/core/styles'
const useStyles = makeStyles(theme => ({
cell: {
background: 'none',
animation: `$bgColor 3s`,
animationIterationCount: 1
},
'@keyframes bgColor': {
'0%': {
background: '#aacc00'
},
'100%': {
background: 'none'
}
}
}))
const RenderBodyTable = ({ rows, isClient, filter, dataRow }) => {
const classes = useStyles()
return rows.map(row => (
<TableRow key={row.id}>
<TableCell className={classes.cell}>{row.name}</TableCell>
<TableCell className={classes.cell}>{row.family}</TableCell>
<TableCell className={classes.cell}>{row.tell}</TableCell>
<TableCell className={classes.cell}>{row.address}</TableCell>
</TableRow>
))
}
export default React.memo(RenderBodyTable)

Answer 1

您需要添加一些逻辑来检测道具更改，然后在发生更改时更新样式。

目前你的动画只在页面加载时播放，因为你没有这个逻辑。

有很多方法可以实现，但请从本教程开始。