主细节视图的 AG 网格自定义细节未呈现 'could not find function component'

Question

我正在尝试让 ag-grid 主从视图与自定义详细视图一起使用。默认的细节视图呈现一个网格，这不是我们需要的；但是，当我尝试为 ag 网格提供自定义组件以根据 here 呈现时，我运行遇到了问题。在阅读了不同地方的文档后，我尝试了几个选项，但每个选项似乎都运行进入一个或另一个问题，并且想问问是否有一些我可能忽略的 ag-grid voodoo应该这样做 smoothly/painlessly?

我试过：

方案一：使用'detailCellRenderer'AgGrid选项直接注入组件。喜欢here

选项 2：使用 'components' 选项并将其中的 'detailCellRenderer' 键设置为自定义组件。

选项 3：同时使用 'components' 和 'detailCellRenderer' 选项，方法是设置键值对，使 components['detailCellRenderer'] = detailCellRenderer，并为 'detailCellRenderer' AgGrid 的选项，用于按名称注册组件。选项 2 和 3 都受到文档 here

的启发

选项 4：尝试通过将 'components' 选项中的 'agGridDetailCellRenderer' 设置为我的自定义组件来覆盖 here 中描述的默认单元格渲染器。

我只是想获得一个基本的自定义单元格渲染，所以我从文档中获取了自定义组件 here。

注意：我在幕后使用的是 24.0.0 版的 ag-grid-react； AGGrid 组件只是一个简单的包装器，它加载所有企业版模块和一些默认道具等，并将所有内容转发给 AGGridReact

以下各种选项的代码：

Option 1
const DetailCellRenderer = () => (
    <h1 style={{ padding: '20px' }}>My Custom Detail</h1>
  );

  const detailCellRenderer = useMemo<any>(() => {
    return DetailCellRenderer;
  }, []);

  const components = {
    detailCellRenderer: detailCellRenderer
  }

  return (
    <>
      <Box>
        <TableHeading />
        <ErrorOverlay
          errorMessage={ADVANCED_COMMISSION_ERROR}
          isErrorMessage={!!advancedCommissionTransactionsError}
        >
          <Box width="100%" maxWidth="1050px" marginTop={1} className={classes.agTable}>
            <Card>
              <AgGrid
                {...TRANSACTION_GRID_DEFAULT_PROPS}
                columnDefs={ADVANCED_COMMISSION_GRID_COLS}
                rowData={gridTransactionData}
                onGridReady={onGridReady}
                masterDetail={true}
                //components={components}
                detailCellRenderer={detailCellRenderer}
                detailCellRendererParams={{}}
              />
Option 2
const DetailCellRenderer = () => (
    <h1 style={{ padding: '20px' }}>My Custom Detail</h1>
  );

  const detailCellRenderer = useMemo<any>(() => {
    return DetailCellRenderer;
  }, []);

  const components = {
    detailCellRenderer: detailCellRenderer
  }

  return (
    <>
      <Box>
        <ErrorOverlay
          errorMessage={ADVANCED_COMMISSION_ERROR}
          isErrorMessage={!!advancedCommissionTransactionsError}
        >
          <Box width="100%" maxWidth="1050px" marginTop={1} className={classes.agTable}>
            <Card>
              <AgGrid
                {...TRANSACTION_GRID_DEFAULT_PROPS}
                columnDefs={ADVANCED_COMMISSION_GRID_COLS}
                rowData={gridTransactionData}
                onGridReady={onGridReady}
                masterDetail={true}
                components={components}
                // detailCellRenderer={detailCellRenderer}
                detailCellRendererParams={{}}
              />
Option 3
const DetailCellRenderer = () => (
    <h1 style={{ padding: '20px' }}>My Custom Detail</h1>
  );

  const detailCellRenderer = useMemo<any>(() => {
    return DetailCellRenderer;
  }, []);

  const components = {
    'detailCellRenderer': detailCellRenderer
  }

  return (
    <>
      <Box>
        <TableHeading />
        <ErrorOverlay
          errorMessage={ADVANCED_COMMISSION_ERROR}
          isErrorMessage={!!advancedCommissionTransactionsError}
        >
          <Box width="100%" maxWidth="1050px" marginTop={1} className={classes.agTable}>
            <Card>
              <AgGrid
                {...TRANSACTION_GRID_DEFAULT_PROPS}
                columnDefs={ADVANCED_COMMISSION_GRID_COLS}
                rowData={gridTransactionData}
                onGridReady={onGridReady}
                masterDetail={true}
                components={components}
                detailCellRenderer='detailCellRenderer'
                detailCellRendererParams={{}}
              />
Option 4
const DetailCellRenderer = () => (
    <h1 style={{ padding: '20px' }}>My Custom Detail</h1>
  );

  const detailCellRenderer = useMemo<any>(() => {
    return DetailCellRenderer;
  }, []);

  const components = {
    'detailCellRenderer': detailCellRenderer
  }

  return (
    <>
      <Box>
        <TableHeading />
        <ErrorOverlay
          errorMessage={ADVANCED_COMMISSION_ERROR}
          isErrorMessage={!!advancedCommissionTransactionsError}
        >
          <Box width="100%" maxWidth="1050px" marginTop={1} className={classes.agTable}>
            <Card>
              <AgGrid
                {...TRANSACTION_GRID_DEFAULT_PROPS}
                columnDefs={ADVANCED_COMMISSION_GRID_COLS}
                rowData={gridTransactionData}
                onGridReady={onGridReady}
                masterDetail={true}
                components={components}
                detailCellRenderer='detailCellRenderer'
                detailCellRendererParams={{}}
              />

每次尝试（选项1,2,3,4）对应的错误如下：

选项 1

选项 2

选项 3

选项4

Answer 1

事实证明，根据 the documentation for version 24.0.0，要使用自定义组件，首先需要使用 'frameworkComponents' 属性注册它，如下所示：

 const DetailCellRenderer = () => (
    <h1 style={{ padding: '20px' }}>My Custom Detail</h1>
  );

  const detailCellRenderer = useMemo<any>(() => {
    return DetailCellRenderer;
  }, []);

 <AgGrid
                {...TRANSACTION_GRID_DEFAULT_PROPS}
                columnDefs={ADVANCED_COMMISSION_GRID_COLS}
                rowData={gridTransactionData}
                onGridReady={onGridReady}
                masterDetail={true}
                detailCellRenderer={'advancedCommissionsDetailCellRenderer'}
                frameworkComponents={{ advancedCommissionsDetailCellRenderer: detailCellRenderer }}
              />

这在版本 27 中不是必需的，这是文档默认的版本，因此提供的示例并不完整。

主细节视图的 AG 网格自定义细节未呈现 'could not find function component'

AG Grid custom detail for master detail view not rendering 'could not find function component'

ag-grid

ag-grid-react