Ag-Grid行分组渲染异常：所有行显示相同内容，求修正方案

我在AG Grid中配置了自定义分组行渲染器groupRowRendererFramework: GroupRowInnerRenderer，但运行后所有行都显示自定义渲染器里的“Hello World”。我希望只有分组行显示这段内容，普通数据行正常展示各列的值。请问我的自定义分组行渲染器缺少什么代码？

提供的代码 #

App组件代码 #

import GroupRowInnerRenderer from './GroupRowInnerRenderer';

const App = () => {
  
  const [rowData, setRowData] = useState();

  useEffect(() => {
    fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
    .then(result => result.json())
    .then(rowData => setRowData(rowData))
  }, []);

  const defaultColDef = useMemo( ()=> ( {
    resizable: true, 
  }), []);  

  const [columnDefs, setColumnDefs] = useState([
    { field: 'athlete'},
    { field: 'age', headerName: 'Age12' },
    { field: 'country' , rowGroup: true  },
    { field: 'year' },
    { field: 'date' },
    { field: 'sport' },
    { field: 'gold' },
    { field: 'silver' },
    { field: 'bronze' },
    { field: 'total' }
  ]);

  const gridOptions:GridOptions = {
    suppressMovableColumns: true,
    suppressContextMenu: true,
    enableRangeSelection: true,
    suppressRowTransform: true,
    columnDefs: [...columnDefs],
    defaultColDef,
    singleClickEdit: true,
    groupUseEntireRow: true,
    animateRows: true,
    groupRowRendererFramework: GroupRowInnerRenderer
  }

  return (
    <>
       <div className="ag-theme-alpine" style={{height: 700, width: '100%'}}>
           <AgGridReact
               animateRows={true} 
               rowData={rowData}
               gridOptions={gridOptions}
               autoGroupColumnDef={{ minWidth: 200 }}
               >
           </AgGridReact>
       </div>
    </>
   );
};
export default App;

GroupRowInnerRenderer.jsx代码 #

import React, { useEffect, useState } from 'react';
export default (props) => {
    console.log('props=',props)
    return (
        <div>
            <span>Hello World</span>
        </div>
    );
}

问题核心在于：你启用了groupUseEntireRow: true，让分组行渲染器接管整行渲染，但自定义渲染器既没保留分组行的核心交互功能，也没按照AG Grid的预期结构输出内容，导致视觉上出现所有行都显示相同内容的误解。

修改GroupRowInnerRenderer.jsx，确保仅分组行显示自定义内容，同时保留分组展开/折叠功能：

import React from 'react';

export default (props) => {
    // groupRowRendererFramework仅作用于分组行，直接渲染自定义内容即可
    return (
        <div style={{ display: 'flex', alignItems: 'center', padding: '8px 16px' }}>
            {/* 保留分组行的展开/折叠交互按钮 */}
            <button 
                onClick={() => props.node.setExpanded(!props.node.expanded)}
                style={{ border: 'none', background: 'transparent', cursor: 'pointer' }}
            >
                {props.node.expanded ? '▼' : '▶'}
            </button>
            {/* 自定义分组行内容 */}
            <span style={{ marginLeft: 8 }}>Hello World</span>
            {/* 可选：添加分组额外信息，比如分组名称、数据行数 */}
            <span style={{ marginLeft: 16, color: '#666' }}>
                分组：{props.node.key} | {props.node.allLeafChildren.length} 条数据
            </span>
        </div>
    );
};

同时确认gridOptions中绑定的是groupRowRendererFramework（仅作用于分组行），而非全局行渲染器rowRendererFramework。

修改后，只有分组行会显示“Hello World”及交互按钮，普通数据行会正常展示各列原始值。

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