AG-Grid 25.1.0 + React Hooks：如何从cellRendererFramework调用父组件函数？

解决逻辑 #

AG-Grid 2.x版本中，静态导出的列定义无法直接接收组件props，因此要传递父组件的函数，需通过Grid Options的context属性将函数注入AG-Grid的全局上下文，再在CellRenderer组件中从props获取该上下文。

分步修改代码 #

1. 网格组件（Grid.jsx）

将父组件传来的setAgentData注入AG-Grid的context，同时修正AG-Grid组件的引用（正确组件是AgGridReact）：

import { columnDefs } from './columns';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

const Grid = (props) => {
  const gridOptions = {
    // 把父组件的函数放进AG-Grid上下文
    context: {
      setAgentData: props.setAgentData
    },
    columnDefs: columnDefs,
    // AG-Grid接收行数据的属性是rowData，不是records
    rowData: props.agentData
  };

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: '100%' }}>
      <AgGridReact gridOptions={gridOptions} />
    </div>
  );
};

export default Grid;

2. 列定义（columns.js）

保持原静态定义即可，无需额外修改：

import Toggle from './toggle';

export const columnDefs = [
  {
    field: 'active',
    cellRendererFramework: Toggle
  }
];

3. CellRenderer组件（Toggle.jsx）

从AG-Grid的props中取出context，调用里面的setAgentData：

const Toggle = (props) => {
  // 从AG-Grid上下文获取父组件的函数
  const { setAgentData } = props.context;
  // 当前行的数据通过props.data获取
  const currentRow = props.data;

  const handleClick = () => {
    // 示例：修改当前行的active状态并更新父组件数据
    const updatedAgentData = props.agentData.map(item => 
      item.id === currentRow.id ? {...item, active: !item.active} : item
    );
    setAgentData(updatedAgentData);
  };

  return (
    <button type="button" onClick={handleClick}>
      {currentRow.active ? '禁用' : '启用'}
    </button>
  );
};

export default Toggle;

关键注意点 #

• 不要尝试给静态导出的columnDefs传递props，模块静态导出后无法动态接收组件的props，这是React模块机制的限制。
• AG-Grid的context是全局共享的，所有自定义渲染组件、过滤器等都能通过props.context访问到里面的内容，适合传递全局函数或配置。

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