React Table中数据变更时单元格变色及独立Cell组件传参问题

你提到的「将单元格变色逻辑封装为独立组件、仅需在columns配置中传入Cell属性即可生效」的实现方式完全可行，这是React Table（现TanStack Table）设计时原生支持的自定义单元格渲染方案，不需要额外操作表格实例或者DOM就能实现单单元格的精准控制。

你不需要手动遍历DOM定位单元格，React Table渲染单元格时，会自动给传入的Cell组件注入当前单元格的值、所属行信息、所属列信息，每个单元格独立维护自身状态，天然就具备精准定位的能力。
整体实现只需要三步：

• 用useRef缓存上一次API返回的全量表格数据，ref更新不会触发额外重渲染，适合做新旧值对比的存储介质
• 封装独立的高亮单元格组件，组件内部以「行唯一ID+列字段名」作为单元格的唯一标识，对比当前值和缓存中的旧值，不一致时触发高亮样式，定时恢复默认样式即可
• 在需要开启高亮的列配置中，将cell属性直接指向你封装好的高亮组件，不需要额外传参，React Table会自动注入所需上下文

1. 封装独立高亮单元格组件 #

import { useEffect, useRef, useState } from 'react'
// 缓存上一轮各单元格的值，组件全局可用
const prevCellValues = useRef({})

export const ChangeHighlightCell = ({ value, row, column }) => {
  const [highlight, setHighlight] = useState(false)
  // 生成当前单元格的唯一标识，确保定位不会错乱
  const cellUniqueKey = `${row.id}-${column.id}`

  useEffect(() => {
    const oldValue = prevCellValues.current[cellUniqueKey]
    // 首次渲染无旧值不触发高亮，值变更时才触发
    if (oldValue !== undefined && oldValue !== value) {
      setHighlight(true)
      // 高亮2秒后自动恢复默认样式，时长可自行调整
      const timer = setTimeout(() => setHighlight(false), 2000)
      return () => clearTimeout(timer)
    }
    // 更新缓存值供下一次对比
    prevCellValues.current[cellUniqueKey] = value
  }, [value, cellUniqueKey])

  return (
    <div
      style={{
        padding: '6px 8px',
        backgroundColor: highlight ? '#fff1f0' : 'transparent',
        transition: 'background-color 0.2s ease'
      }}
    >
      {value}
    </div>
  )
}

2. columns配置中直接使用 #

const tableColumns = [
  {
    accessorKey: 'orderNo',
    header: '订单号',
    // 直接传入封装好的组件即可生效，不需要额外逻辑
    cell: ChangeHighlightCell
  },
  {
    accessorKey: 'amount',
    header: '订单金额',
    cell: ChangeHighlightCell
  },
  {
    accessorKey: 'status',
    header: '订单状态',
    cell: ChangeHighlightCell
  }
]

请确保传入表格的row.id是数据的唯一主键（比如数据本身的id字段），不要用行索引作为row id，否则表格排序、分页、新增删除行的时候会出现单元格标识错乱，导致高亮逻辑异常。每次API返回新数据时不需要手动清空缓存，组件会在每次渲染时自动对比更新缓存值。

内容的提问来源于stack exchange，提问作者Jennifer De Goede