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

Question

在 React 函数 组件内部访问 ag-Grid API 的最佳方式是什么？

我必须使用 API 中的一些方法（getSelectedNodes、setColumnDefs 等）所以我保存了对 API 的引用（使用 useState 钩子）在 onGridReady 事件处理程序中：

onGridReady={params => {
    setGridApi(params.api);
}}

然后我可以这样调用 API：gridApi.getSelectedNodes()

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

堆栈：

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

Answer 1

只是想知道，为什么你需要使用 state-hook，因为 gridApi 在生命周期中不会改变。

如果您检查 ag-grid 团队示例，您会发现他们仅使用属性绑定：

onGridReady = params => {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
};

所以我想，您不需要使用 state 来存储 API 引用。

Answer 2

我运行遇到了同样的问题，但这里有一个解决方法，至少可以让您获得选定的行。本质上，我正在做的是将 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 3

好吧，我正在我的项目中这样做。您可以使用 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 4

我们找到了使用 ref 的最惯用的方式。因为 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>
  </>
)}

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

How to access ag-Grid API in React function component (useState hook)?

function

ag-grid

ag-grid-react

react-hooks