function - 如何在 React 函数组件（useState 挂钩）中访问 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

标签： functionreact-hooksag-gridag-grid-react

Answer 1

我们找到了使用 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>
  </>
)}