Question

在反应功能组件内部访问ag-Grid API的最佳方法是什么？

我必须使用API中的某些方法（getSelectedNodes，setColumnDefs等），因此我将对API的引用（使用useState钩子）保存在{{1}中}事件处理程序：

onGridReady

然后我可以像这样调用API：onGridReady={params => { setGridApi(params.api); }}

我还没有注意到这种方法的任何问题，但是我想知道是否还有更多的习惯用法方式？

堆栈：

ag-grid-community和ag-grid-react 22.1.1
反应16.12.0

Answer 1

好吧，我正在我的项目中做到这一点。您可以使用useRef钩子来存储gridApi。

const gridApi = useRef();

const onGridReady = params => {

   gridApi.current = params.api;  // <== this is how you save it

   const datasource = getServerDataSource(
     gridApi.current,
     {
       size: AppConstants.PAGE_SIZE,
       url: baseUrl,
       defaultFilter: props.defaultFilter
     }
   );

  gridApi.current.setServerSideDatasource(datasource); // <== this is how you use it
};

Answer 2

我们找到了使用引用的最惯用的方法。由于api不是我们组件的状态。实际上可以简单地做到这一点：

<AgGridReact ref={grid}/>

然后与

一起使用

grid.current.api

以下是一个示例：

import React, { useRef } from 'react'
import { AgGridReact } from 'ag-grid-react'
import { AgGridReact as AgGridReactType } from 'ag-grid-react/lib/agGridReact'

const ShopList = () => {
  const grid = useRef<AgGridReactType>(null)

 ...

  return (
    <AgGridReact ref={grid} columnDefs={columnDefs} rowData={shops} />
  )

}

这里的好处是，您可以访问gridApi，但也可以访问columnApi。就像这样：

// rendering menu to show/hide columns:
{columnDefs.map(columnDef =>
  <>
    <input
    type='checkbox'
    checked={
        grid.current
        ? grid.current.columnApi.getColumn(columnDef.field).isVisible()
        : !(columnDef as { hide: boolean }).hide
    }
    onChange={() => {
        if (grid.current?.api) {
        const col = grid.current.columnApi.getColumn(columnDef.field)
        grid.current.columnApi.setColumnVisible(columnDef.field, !col.isVisible())
        grid.current.api.sizeColumnsToFit()
        setForceUpdate(x => ++x)
        }
    }}
    />
    <span>{columnDef.headerName}</span>
  </>
)}

Answer 3

我遇到了同样的问题，但是这里有一个解决方法，至少可以让您选择行。本质上，我正在做的是将API从agGrid回调发送到另一个函数。具体来说，我使用OnSelectionChanged回调来获取当前行节点。下面的示例：

  const onSelectionChanged = params => {
    setDetails(params.api.getSelectedRows());
  };

return (<AgGridReact
          columnDefs={agData.columnDefs}
          rowSelection={'single'}
          enableCellTextSelection={true}
          defaultColDef={{
            resizable: true,
          }}
          rowHeight={50}
          rowData={agData.rowData}
          onCellFocused={function(params) {
            if (params.rowIndex != null) {
              let nNode = params.api.getDisplayedRowAtIndex(params.rowIndex);
              nNode.setSelected(true, true);
            }
          }}
          onSelectionChanged={function(params) {
            onSelectionChanged(params);
            params.api.sizeColumnsToFit();
          }}
          onGridReady={function(params) {
            let gridApi = params.api;
            gridApi.sizeColumnsToFit();
          }}
          deltaRowDataMode={true}
          getRowNodeId={function(data) {
            return data.id;
          }}
        />);

Answer 4

只是想知道，为什么您需要使用状态挂钩，因为在生命周期中不会更改cuz unset($_SESSION['errMsg']);。

如果您要检查农业网格团队的样本，您会发现他们只是在使用属性绑定：

gridApi

所以我想，您不需要使用onGridReady = params => { this.gridApi = params.api; this.gridColumnApi = params.columnApi; };来存储state引用。

如何在React函数组件（useState钩子）中访问ag-Grid API？

4 个答案: