无法在 Typescript 中使用 React hooks 获取 Ag-Grid 中的 gridApi

Question

我正在使用函数组件与typescript进行反应。这是我的组件的样子

const Table = (props: TableProps) => {

const [gridApi, setGridApi] = React.useState(() => {})

  const gridOptions = {
    rowData: rowData,
    columnDefs: columnDef,
    pagination: true,
  }

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


  return (
    <div className="ag-theme-alpine" >
      <AgGridReact gridOptions={gridOptions} onGridReady={onGridReady}/>
    </div>
  );
};

我需要获取，gridApi以便我可以在另一个组件的处理程序中使用它来进行快速过滤。

查看此处的文档，推荐的方法是获取 gridApi 并将其存储在状态中。考虑到我在这里使用的是函数组件，这就是我所做的

const [gridApi, setGridApi] = React.useState(() => {})

当我在处理程序中执行此操作时：

  const handleTableFilter = (filterText: string) => {
      gridApi.setQuickFilter(filterText) // error here - Property 'setQuickFilter' does not exist on type '() => void'.
  }

打字稿抱怨说 Property 'setQuickFilter' does not exist on type '() => void'.

我还尝试了这里推荐的 Javascript 模式，但我也不太明白。

我希望得到一些有关如何在我的用例中存储 gridApi 的帮助（Typescript、使用函数组件的 React - React hooks）。如果可能的话，我更喜欢一个不必将函数存储在useState. 如果没有，我会接受任何解决方案。

Answer 1

这是我最终在 Typescript 中获取 GridApi 而没有错误的方法（问题中的 Mike Abeln 评论为我指出了正确的方向）

const Table = (props: TableProps) => {

// - - - - omitted code for column & row data from props - - - -

  const gridApiRef = useRef<any>(null); // <= defined useRef for gridApi

  const [rowData, setRowData] = useState<any[]>([]);
  const [columnDef, setColumnDef] = useState<any[]>([]);

// - - - - omitted code for useEffect updating rowData and ColumnDef - - - -

  const gridOptions = {
    pagination: true,
  }

const onGridReady = (params) => {
    params.api.resetRowHeights();
    gridApiRef.current = params.api // <= assigned gridApi value on Grid ready
}

  const handleTableFilter = (filterText: string) => {
    gridApiRef.current.setQuickFilter(filterText); // <= Used the GridApi here Yay!!!!!
  }

  return (
    <div className="ag-theme-alpine" >
      <AgGridReact columnDefs={columnDef} 
      rowData={rowData} 
      gridOptions={gridOptions} 
      onGridReady={onGridReady} 
      ref={gridApiRef}/> // the gridApiRef  here
    </div>
  );
};

虽然我在表上看到一些性能问题（表很大，大约有 600K 行），但这回答了如何获取 GridApi 并使用它来过滤的问题