如何在ReactJS中高亮最近30秒内更新的DataTable表格行？

要给react-data-table-component里最近30秒更新的行加高亮，核心思路是追踪每行的更新时间戳，然后动态判断并应用样式。下面是具体的实现步骤：

步骤1：确保数据包含更新时间戳 #

首先，你的每条数据条目需要携带一个准确的更新时间字段（比如updatedAt）。如果后端API还没返回这个字段，你可以在前端获取数据时，给每条数据手动添加当前时间戳：

// 假设你在useEffect里获取数据的代码
useEffect(() => {
  axios.get('/your-flask-api-endpoint')
    .then(res => {
      const dataWithTimestamps = res.data.map(item => ({
        ...item,
        updatedAt: Date.now() // 如果后端有返回更新时间，建议用new Date(item.updatedAt).getTime()转换为时间戳
      }));
      setData(dataWithTimestamps); // 把带时间戳的数据存入state
    });
}, []);

步骤2：添加高亮判断逻辑 #

在FinalResponse组件里，写一个辅助函数来判断某行是否是最近30秒内更新的：

const isRecentlyUpdated = (updatedAt) => {
  const THIRTY_SECONDS = 30 * 1000;
  return Date.now() - updatedAt < THIRTY_SECONDS;
};

步骤3：配置DataTable的行样式 #

利用react-data-table-component提供的rowStyle属性，它支持传入一个函数，根据每行数据动态返回样式：

import React from 'react';
import DataTable from 'react-data-table-component';

// 自定义高亮样式，也可以写到单独的CSS文件中
const highlightStyle = {
  backgroundColor: '#f0f9ff', // 淡蓝色高亮，可根据需求替换颜色
};

const FinalResponse = (props) => {
  const rows = props.data;
  const [refreshKey, setRefreshKey] = React.useState(0);

  const isRecentlyUpdated = (updatedAt) => {
    const THIRTY_SECONDS = 30 * 1000;
    return Date.now() - updatedAt < THIRTY_SECONDS;
  };

  const columns = [
    // 这里是你的列配置示例，根据实际业务调整
    {
      name: '数据名称',
      selector: row => row.name,
    },
    {
      name: '数据值',
      selector: row => row.value,
    },
    // 更多列配置...
  ];

  // 每秒刷新一次，让超过30秒的行自动取消高亮
  React.useEffect(() => {
    const interval = setInterval(() => {
      setRefreshKey(prev => prev + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return (
    <div>
      <DataTable
        key={refreshKey}
        data={rows}
        columns={columns}
        // 动态给符合条件的行加高亮样式
        rowStyle={row => isRecentlyUpdated(row.updatedAt) ? highlightStyle : {}}
      />
    </div>
  );
};

export default FinalResponse;

说明 #

• 时间戳的准确性很重要：如果后端能提供每条数据的实际更新时间，优先用后端的时间，避免前端本地时间偏差导致判断错误。
• 自动刷新逻辑：通过定时器每秒更新refreshKey，触发DataTable重渲染，确保超过30秒的行能自动移除高亮样式。

内容的提问来源于stack exchange，提问作者Ishaan Agnihotri