ag-grid-react 25.1.0：单元格展开时行高无法自动调整问题

问题原因 #

AG Grid的autoHeight属性仅在单元格初次渲染时计算行高，自定义渲染器内部的DOM内容变化（比如点击按钮切换文本）属于组件内部状态更新，网格无法自动感知这种变化，因此不会重新计算行高。

解决步骤 #

1. 在自定义渲染器中主动触发行高刷新 #

当内容切换完成后，调用AG Grid提供的API主动刷新当前行的单元格，让网格重新计算行高。核心是使用params.api.refreshCells()方法，并指定精准的刷新范围避免性能浪费。

2. 代码实现示例 #

给你的自定义单元格渲染器添加刷新逻辑：

import React, { useState } from 'react';

const CustomCellRenderer = (props) => {
  const [showFullText, setShowFullText] = useState(false);

  const toggleText = () => {
    setShowFullText(!showFullText);
    // 内容变化后，通知AG Grid刷新当前行的当前列单元格
    props.api.refreshCells({
      force: true, // 强制刷新，跳过缓存
      rowNodes: [props.node], // 仅刷新当前行
      columns: [props.colDef.field] // 仅刷新当前列
    });
  };

  return (
    <div style={{ padding: '6px' }}>
      <button onClick={toggleText}>切换文本</button>
      <div style={{ marginTop: '6px' }}>
        {showFullText 
          ? '这是一段需要换行显示的长文本，内容足够长时会自动撑开单元格高度，需要AG Grid重新计算行高来适配完整内容' 
          : '短文本'}
      </div>
    </div>
  );
};

export default CustomCellRenderer;

3. 额外注意事项 #

• 确认defaultColDef中未设置fixedHeight，该属性会直接覆盖autoHeight，导致行高固定不变。
• 自定义渲染器内部的容器不要设置overflow: hidden或固定高度，否则实际内容高度会被隐藏，网格计算行高时会出错。
• refreshCells的参数要精准，只刷新必要的行和列，避免全局刷新带来的性能损耗。

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