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

Question

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

Answer 1

您可以在 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. 最后，在 colDef 数组中插入包含 cellRenderer 的列，如下所示：

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

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

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