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

Question

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

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，这样我就可以在另一个组件的处理程序中使用它来进行快速过滤。

查看文档 HERE ，推荐的方式是抓取gridApi，存储在state中。考虑到我在这里使用函数组件，这就是我所做的

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

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

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

Typescript 提示 属性“setQuickFilter”在类型“() => void”上不存在。

我还尝试了为 Javascript 推荐的模式 HERE但我也不太明白。

对于如何在我的用例中存储 gridApi(Typescript、React 使用 Function 组件 - 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>
  );
};

虽然我在表上看到了一些性能问题(表很大，大约有 60 万行)，但这回答了关于如何获取 GridApi 并使用它进行过滤的问题