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

EN

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

基本上，你必须：

1. 创建您的自定义渲染器，该渲染器将显示在列的单元格中，如DeleteCellRenderer。你至少需要访问2个道具：

- `props.context`, the grid's context which will contain the method(s) to fire in the `onClick` method
- `props.data`, which contains the data for that row - the specific item in the `rowData` array that is.

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

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

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

const handleDelete = (data) => { //您的逻辑在这里}；// ...

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

const colDef = //... { headerName："delete“cellRenderer："deleteCellRenderer”}，//...；

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

//...