Ag-Grid技术问题：能否基于定时器而非行数据为行设置样式？

需求：表格行根据存储的秒数，在时间的50%、80%节点变更背景色，但表格数据固定，原方案通过数组存储ID结合rowClassRules无法触发样式重计算（无数据变更）。

可行解决方案 #

方法1：Grid API + React状态（推荐） #

利用Ag-Grid的API主动刷新指定行，同时用React状态管理警告ID数组，确保rowClassRules能捕获最新值：

1. 获取Grid API实例

import { useState } from 'react';
import { AgGridReact } from 'ag-grid-react';

const MyGrid = () => {
  const [gridApi, setGridApi] = useState(null);
  const [redWarnings, setRedWarnings] = useState([]);
  const [yellowWarnings, setYellowWarnings] = useState([]);

  const onGridReady = (params) => {
    setGridApi(params.api);
  };

2. 配置rowClassRules

const rowClassRules = {
    'red': (params) => redWarnings.includes(params.data.Id),
    'yellow': (params) => yellowWarnings.includes(params.data.Id)
  };

3. 定时器中更新状态并刷新指定行

// 新增行时调用该逻辑（假设Timeout为行数据中的秒数字段，Id为行唯一标识）
  const setupTimers = (Id, Timeout) => {
    setTimeout(() => {
      setYellowWarnings(prev => [...prev, Id]);
      // 获取对应行节点并刷新
      const rowNode = gridApi?.getRowNode(Id);
      if (rowNode) gridApi.refreshRow(rowNode);
    }, 1000 * Timeout * 0.5);

    setTimeout(() => {
      setRedWarnings(prev => [...prev, Id]);
      const rowNode = gridApi?.getRowNode(Id);
      if (rowNode) gridApi.refreshRow(rowNode);
    }, 1000 * Timeout * 0.8);
  };

4. 渲染AgGrid组件

return (
    <AgGridReact
      onGridReady={onGridReady}
      rowClassRules={rowClassRules}
      // 其他配置项...
    />
  );
};

export default MyGrid;

方法2：直接操作行DOM元素 #

跳过rowClassRules，直接获取行DOM节点添加/移除CSS类：

const setupTimers = (Id, Timeout) => {
  setTimeout(() => {
    const rowNode = gridApi?.getRowNode(Id);
    const rowElement = rowNode?.getRowElement();
    if (rowElement) rowElement.classList.add('yellow');
  }, 1000 * Timeout * 0.5);

  setTimeout(() => {
    const rowNode = gridApi?.getRowNode(Id);
    const rowElement = rowNode?.getRowElement();
    if (rowElement) {
      rowElement.classList.remove('yellow');
      rowElement.classList.add('red');
    }
  }, 1000 * Timeout * 0.8);
};

注意：Ag-Grid在排序、分页、滚动时可能重新渲染行，导致直接添加的类丢失，需额外监听网格事件（如rowRendered）补全样式。

方法3：状态驱动+全局刷新（小数据量适用） #

通过React状态更新rowClassRules，并调用全局刷新方法：

import { useState, useMemo } from 'react';

// ...
const [redWarnings, setRedWarnings] = useState([]);
const [yellowWarnings, setYellowWarnings] = useState([]);

// 用useMemo缓存rowClassRules，仅在状态变化时重新生成
const rowClassRules = useMemo(() => ({
  'red': (params) => redWarnings.includes(params.data.Id),
  'yellow': (params) => yellowWarnings.includes(params.data.Id)
}), [redWarnings, yellowWarnings]);

const setupTimers = (Id, Timeout) => {
  setTimeout(() => {
    setYellowWarnings(prev => [...prev, Id]);
    gridApi?.refreshAllRows(); // 刷新所有行
  }, 1000 * Timeout * 0.5);

  // 红色警告逻辑同理
};

此方法适合数据量小的场景，大数据量下refreshAllRows会影响性能。

内容的提问来源于stack exchange，提问作者Jenna K