Ag-grid 26.0.0 React版选中单元格范围后操作报addOrRemoveCssClass未定义错求最优解

根因说明 #

该报错确实是AG Grid 26.0.0~26.0.1版本的原生bug，问题出在范围选择模块的DOM引用校验逻辑缺失：当选中单元格范围后执行翻页、排序、筛选等会触发表格行重渲染的操作时，旧的单元格DOM节点已经被销毁，但AG Grid内部还保留了之前的范围选择状态，触发范围选择更新事件时尝试对不存在的DOM节点执行addOrRemoveCssClass操作就会抛出该错误。

最优解决方案 #

优先选择升级AG Grid依赖版本，官方已经在26.1.0及之后的26.x稳定版修复了该bug，只需要将三个相关依赖版本统一升级到26.1.0以上即可，无需修改任何业务代码，是成本最低的方案。
推荐升级到26.x系列的最终稳定版26.2.0，兼容性最好，不会引入其他破坏性的特性变更。

无法升级版本的替代方案 #

如果受项目限制暂时无法升级AG Grid版本，可以用全局事件监听的方式替代手动逐个操作点加清空逻辑的方案，避免漏改导致的报错：
在GridOptions中统一配置相关事件回调，触发表格重渲染操作时自动清空范围选择：

import { GridOptions } from 'ag-grid-community';

const gridOptions: GridOptions = {
  // 原有其他配置保持不变
  // 翻页时自动清空
  onPaginationChanged: (params) => {
    // 仅翻页操作触发清空，跳过初始化回调
    if (params.newPage) {
      params.api?.clearRangeSelection?.();
    }
  },
  // 排序时自动清空
  onSortChanged: (params) => {
    params.api?.clearRangeSelection?.();
  },
  // 筛选时自动清空
  onFilterChanged: (params) => {
    params.api?.clearRangeSelection?.();
  },
  // 行数据刷新时自动清空
  onRowDataUpdated: (params) => {
    params.api?.clearRangeSelection?.();
  }
}

该方案不需要修改原有业务的按钮、翻页组件逻辑，全局统一处理所有会触发表格重渲染的场景，维护成本更低。

不建议自行实现跨页范围选择功能，26.0.x版本的底层逻辑缺陷会导致实现成本极高，优先选择版本升级方案。

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