AG网格头部框架FRAMEWORK PROP不渲染自定义组件

Question

我正在尝试使用AG网格创建自定义标头并进行反应，但无法在我的 HeaderComponentFramework prop中渲染自定义组件 prop autogroupcolumpcolumndefs 。

ag noreferrer“> ag grid”文档指向使用 HeaderComponentFramework ，并且在使用其plunker链接编辑其示例代码时，我可以成功地创建和编辑自定义标题。当我尝试在代码中实现相同的内容时，我甚至无法访问组件。例如，我试图委托。从我的自定义标头组件中删除一条消息，但没有登录。我还尝试了替代道具，例如 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 prop中注册我的组件：

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使用with react 18-而不是给出任何错误，它只是跳过呈现标头组件并在列标题中渲染的任何内容：请参见此stackblitz 进行复制。

升级到AG版本27+修复了它。