AG Grid headerComponentFramework prop 未渲染自定义组件

Question

我正在尝试使用 AG Grid 和 React 创建自定义标头，但无法渲染传递到我的

headerComponentFramework

中的

autoGroupColumnDefs

属性的自定义组件。

AG Grid 文档指向使用

headerComponentFramework

，当使用 Plunker 链接编辑示例代码时，我能够成功创建和编辑自定义标头。当我尝试在代码中实现相同的功能时，我什至无法访问我的组件。例如。我尝试从自定义标头组件中 console.log 一条消息，但没有记录。我还尝试了替代道具，例如

headerComponent

和

headerGroupComponent

但这些也不起作用。

示例代码如下：

import CustomHeaderComponent from './filePath';

autoGroupColumnDef = useMemo(() => {
  headerComponentFramework: CustomHeaderComponent
  headerName: ‘name’,
  suppressMenu: true,
  cellRendererSelector: () => {}
  pinned: left,
}), [dependencies])

gridOptions = { 
  …otherGridOptions,
  autoGroupColumnDefs
}

return (
  <AgGridComponent 
    gridOptions={gridOptions}
  />
)

export const CustomHeaderComponent = {
  console.log(‘hello world’); // doesn't log

  // do stuff 

  return (
    <div> {Custom Header} </div>
  )
}

headerComponentFramework

是这里使用的正确道具吗？如果有人对如何呈现自定义标头有建议，我们将不胜感激。如果我可以提供更多详细信息，请告诉我。

Answer 1

我成功使用了

headerComponent

并在

frameworkComponents

属性中注册了我的组件：

autoGroupColumnDef = useMemo(() => {
  headerComponent: 'customHeaderComponent'
  headerName: ‘name’,
  suppressMenu: true,
  cellRendererSelector: () => {}
  pinned: left,
}), [dependencies])

gridOptions = {
  …otherGridOptions,
  frameworkComponents: {
    customerHeaderComponent: CustomHeaderComponent
  },
  autoGroupColumnDefs
}

我仍然不确定为什么

headerComponentFramework

不起作用。

Answer 2

在我的例子中，我将 AG 版本 26.2.0 与 React 18 一起使用 - 它不会给出任何错误，而是跳过渲染标头组件。

升级到 AG 版本 27+ 修复此问题。