如何在我的 ag-grid 单元格中放置 react jsx 组件

编程问答 2022-06-01

问题描述

不幸的是，我无法共享代码，因为它是公司机密，但我基本上使用 colDefs 在 React ag-grid 中定义我的列，并且希望有一列的单元格都是我构建的自定义 JSX 按钮组件，这将允许我删除单击的单元格的行以及传播代码中其他地方的更改。我一直在尝试使用 cellRenderers 并且根本无法弄清楚如何将自定义反应功能组件添加到单元格中。如果有人可以提供帮助，将不胜感激。我将尝试根据需要提供尽可能多的附加上下文，但遗憾的是无法共享直接代码片段。谢谢！

解决方法

您可以在 ag-grid 的文档 here 中看到一个示例。我还提供了一个 sandbox，您可以在其中单击每个相应的按钮从网格中删除行。

基本上你必须：

  1. 创建将出现在列单元格中的自定义渲染器，例如 DeleteCellRenderer。您必须至少访问 2 个道具：

    • props.context，网格的上下文，其中包含要在 onClick 方法中触发的方法
    • props.data，其中包含该行的数据 - rowData 数组中的特定项。

  2. 打开渲染 <AgGridReact /> 组件的组件并导入渲染器。

  3. 在网格的 frameworkComponents 属性中声明渲染器，如下所示：

    <AgGridReact
  frameworkComponents={{
    deleteCellRenderer: DeleteCellRenderer
  }}
  // ...

  4. 声明在单击按钮时要触发的删除函数，然后将其传递给网格的上下文。

    const handleDelete = (data) => {
  // Your logic here
};

// ...

<AgGridReact
   frameworkComponents={{
     deleteCellRenderer: DeleteCellRenderer
   }}
   context={{ handleDelete }}
   //...

  5. 最后，在包含 cellRenderer 的 colDef 数组中插入列，如下所示：

    const colDef = [
//...
{
  headerName: "delete"
  cellRenderer: "deleteCellRenderer"
},//...
];

    或者，如果您使用 <AgGridColumn> 组件作为子组件：

    <AgGridReact
//...
>
  <AgGridColumn headerName="Delete" cellRenderer="deleteCellRenderer" />
  //...
</AgGridReact>
ag-gridcellrendererjsxjsxreactjsreactjs