如何在React版Ag Grid中修改context并让单元格感知更新？

React版本的Ag Grid采用prop驱动的更新逻辑，你直接修改gridParams.context属于对内部维护对象的直接修改，不会触发组件的props同步逻辑，因此网格感知不到context的变更。原生JS示例中你自己维护了gridOptions的引用、修改后直接生效的逻辑不适用于React封装的组件场景。

• 第一步：将context的核心值提到组件state中管理，绑定为AgGridReact的prop

import { useState, useMemo } from 'react';

// 单独维护context里的动态值
const [reportingCurrency, setReportingCurrency] = useState('EUR');
const [gridParams, setGridParams] = useState(null);

// 用useMemo包裹避免不必要的重渲染
const gridContext = useMemo(() => ({
  reportingCurrency
}), [reportingCurrency]);

const onFirstDataRendered = (params) => {
  setGridParams(params)
}

组件绑定调整为：

<AgGridReact
  columnDefs={columnDefs}
  defaultColDef={{
    flex: 1,
    resizable: true
  }}
  rowData={rowData}
  {/* 绑定动态的context对象 */}
  context={gridContext}
  onFirstDataRendered={onFirstDataRendered}
>

• 第二步：修改context值时直接更新对应state，不需要手动修改gridParams.context

const currencyChange = (value) => {
  // 更新state触发context prop变更
  setReportingCurrency(value);
  // 可选：强制刷新所有单元格和表头，确保所有依赖context的内容都更新
  gridParams?.api.refreshCells({ force: true });
  gridParams?.api.refreshHeader();
};

• 不要直接修改gridParams或gridApi中的context对象，该对象是Ag Grid内部的副本，修改后不会同步到组件配置
• 如果context包含多个动态字段，全部放到state中管理，useMemo的依赖项要包含所有动态字段，避免更新不及时
• 大部分场景下context prop变更后Ag Grid会自动触发使用context的单元格重渲染，如果存在未更新的情况，添加refreshCells({ force: true })即可强制刷新

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