如何在Chrome开发者工具(F12)中调用React版ag-grid的API

React 渲染的ag-grid实例不会直接把API挂在裸DOM节点上，需要通过React内部挂载的Fiber节点遍历提取，以下方法在官方示例页实测可用。

步骤1：定位ag-grid根DOM节点 #

打开F12开发者工具切到控制台，执行代码获取ag-grid的根容器节点：

// DevTools控制台的$等价于document.querySelector，多表格场景可换querySelectorAll按索引取
// 注意类选择器前面要加.，对应class为ag-root-wrapper的节点
const gridRoot = $('.ag-root-wrapper');

*和你预期的$("ag-root-wrapper").***.gridOptions.api调用形式逻辑一致，只是补全类选择器的.即可。

步骤2：通用API提取方法（兼容React 16/17/18全版本） #

React 生产环境构建后，组件实例会挂载在DOM节点以__reactFiber$或__reactInternalInstance$开头的随机后缀属性上，直接遍历Fiber树即可找到挂载的grid API，把下面的代码粘贴到控制台执行即可拿到实例：

function getAgGridApi(domNode) {
  // 定位DOM上挂载的React Fiber入口
  const reactEntryKey = Object.keys(domNode).find(key => 
    key.startsWith('__reactFiber$') || key.startsWith('__reactInternalInstance$')
  );
  if (!reactEntryKey) throw new Error('传入节点不是React渲染的ag-grid根节点');

  let fiberNode = domNode[reactEntryKey];
  // 向上遍历Fiber树，查找挂载了gridOptions/api的组件实例
  while (fiberNode) {
    const stateNode = fiberNode.stateNode;
    const props = fiberNode.memoizedProps || stateNode?.props || {};

    // 匹配不同挂载位置的API实例
    if (props.gridOptions?.api) return props.gridOptions.api;
    if (props.api) return props.api;
    if (stateNode?.api) return stateNode.api;
    if (stateNode?.gridOptions?.api) return stateNode.gridOptions.api;

    fiberNode = fiberNode.return;
  }
  throw new Error('未找到ag-grid API，请确认传入的是正确的ag-grid根节点');
}

// 调用示例：获取当前页面第一个ag-grid的API
const gridApi = getAgGridApi(gridRoot);
console.log('API获取成功：', gridApi);

步骤3：API调用示例 #

拿到gridApi实例后，可直接调用所有官方暴露的方法读写表格状态，举几个常用场景：

// 1. 读取表格全量行数据
const allRowData = [];
gridApi.forEachNode(node => allRowData.push(node.data));
console.log('表格行数据：', allRowData);

// 2. 选中指定行，比如选中第1行
gridApi.getDisplayedRowAtIndex(0)?.setSelected(true);

// 3. 设置列过滤规则，比如筛选运动员列包含"Michael"的行
gridApi.setFilterModel({
  athlete: {
    filterType: 'text',
    type: 'contains',
    filter: 'Michael'
  }
});
gridApi.onFilterChanged();

// 4. 滚动定位到指定行，比如跳转到第100行
gridApi.ensureIndexVisible(99);

快捷获取方式 #

如果页面未对ag-grid全局变量做打包裁剪，可直接通过ag-grid自带的静态方法获取所有表格实例，无需遍历Fiber：

// 返回页面所有ag-grid实例的API数组
const allGridApis = agGrid.Grid.getGrids().map(grid => grid.api);
// 取第一个表格的API直接用即可
const firstGridApi = allGridApis[0];

注意：生产环境如果做了代码压缩、模块化打包，优先使用前面的Fiber遍历方法，兼容性覆盖99%以上的React版ag-grid场景。

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