react-admin中点击Datagrid行如何立即切换行背景色（无渲染延迟）？

我明白你遇到的困扰了——依赖路由路径来判断高亮行确实会因为组件重渲染时机的问题产生延迟。咱们换个更直接的思路：用组件内部状态来跟踪当前选中的行ID，这样点击行时就能立刻更新背景色，完全不需要等路由变化触发的重渲染。

具体修改方案： #

1. 用useState跟踪选中行ID：不再依赖window.location.pathname，而是把选中的行ID存在组件状态里，状态更新会立即触发UI变化。
2. 自定义行点击事件：替代默认的rowClick="show"，这样点击行时同时更新选中状态和跳转到详情页。
3. 初始化状态匹配路由：组件挂载时从路由获取当前详情页的ID，确保刷新页面后高亮状态依然正确。

修改后的完整代码： #

import { useState, useEffect } from 'react';
import { List, Datagrid, TextField, TextEllipsisField, DateField, useNavigate } from 'react-admin';

// 保留你原有的组件和工具函数
// const ListActions = ...;
// const exporter = ...;
// const Pagination = ...;
// const SaleInventoryFilter = ...;
// const OperationButton = ...;
// const classes = ...;
// const getOffsetByTimezone = ...;

const SaleInventoryList = (props) => {
  const navigate = useNavigate();
  // 状态存储当前选中的行ID
  const [selectedRowId, setSelectedRowId] = useState(null);

  // 组件挂载时，从路由初始化选中状态
  useEffect(() => {
    const currentActiveId = window.location.pathname.split('/')[2];
    setSelectedRowId(currentActiveId);
  }, []);

  // 自定义行点击逻辑：先更新选中状态，再跳转
  const handleRowClick = (record) => {
    setSelectedRowId(record.id);
    // 替换成你实际的资源路由，确保和原来rowClick="show"的跳转路径一致
    navigate(`/${props.resource}/${record.id}/show`);
  };

  // 基于选中状态设置行样式，这里改成你要的红色
  const rowStyle = (record) => ({
    backgroundColor: record.id === selectedRowId ? '#ff4444' : '',
    transition: 'background-color 0.1s ease' // 可选：加上过渡动画，让颜色变化更平滑
  });

  return (
    <List 
      {...props} 
      bulkActions={false} 
      actions={<ListActions />} 
      exporter={exporter} 
      pagination={<Pagination />} 
      filters={<SaleInventoryFilter />} 
    >
      <Datagrid rowClick={handleRowClick} rowStyle={rowStyle}>
        <TextField source="item.code" label="Item code" />
        <TextEllipsisField source="item.name" label="Item name" cellClassName={classes.name} />
        <TextField source="stockLocation.name" label="Stock location" />
        <TextField source="batch" />
        <TextField source="leadTime" label="Lead time (days)" />
        <TextField source="onHandQty" label="On hand" />
        <TextField source="availableQty" label="Available" />
        <TextField source="reservedQty" label="Reserved" />
        <DateField source="updatedAt" label={`Updated At (${getOffsetByTimezone()})`} />
        <OperationButton />
      </Datagrid>
    </List>
  );
};

export default SaleInventoryList;

为什么这个方案有效？ #

• 状态selectedRowId的更新会立即触发组件重渲染，rowStyle能实时拿到最新值，所以点击行的瞬间就能看到背景色变红。
• 自定义handleRowClick把状态更新和路由跳转放在一起，既保留了原来的跳转功能，又解决了延迟问题。
• 初始化时从路由同步状态，确保页面刷新后，当前详情页对应的行依然保持高亮。

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