无法在 Typescript 中使用 React 挂钩在 Ag-Grid 中获取 gridApi

Question

我正在使用function 组件与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 并将其存储在 state 中。考虑到我在这里使用 function 组件，这就是我所做的

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

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

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

Typescript 抱怨Property 'setQuickFilter' does not exist on type '() => void'.

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

对于如何在我的用例中存储 gridApi（Typescript，React 使用 Function 组件 - React hooks），我将不胜感激。 如果可能的话，我更喜欢一种不必在useState中存储 function 的解决方案。 如果没有，我可以接受任何解决方案。

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 并使用它来过滤的问题

Answer 2

gridApiRef的类型是来自'ag-grid-react/lib/agGridReact' <AgGridReact> 。

例子：

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

// Make sure it initialize as null.
const gridApiRef = useRef<AgGridReactType>(null); 

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

useEffect(() => {
   fetch('url')
   .then(res => res.json())
   .then(data => setRowData(data)
}, [])


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

这是一个教程： https://thinkster.io/tutorials/using-ag-grid-with-react-getting-started 。 虽然不在 typescript 中。