我应该如何使用 React Hooks 挂在 ag-grid api 上

Posted 2023-02-22

【中文标题】我应该如何使用 React Hooks 挂在 ag-grid api 上

【英文标题】：How should I hang onto the ag-grid api with React Hooks

【发布时间】：2019-10-28 13:27:52

【问题描述】：

ag-grid 建议在他们的 onGridReady 回调中获取指向网格 api 的指针作为变量，如果需要的话。使用 React 类，你可以这样做：

class MyGrid extends React.Component 
  ...
  onGridReady = params => 
    this.gridApi = params.api;
  
  render() 
    // on subsequent calls still have this.gridApi...
    return <AgGridReact onGridReady=this.onGridReady ... />;
  

使用 react 钩子执行此操作的正确模式是什么？到目前为止，这是我的代码；

const MyGrid = props => 
  let gridApi = null;
  const onGridReady = params => 
    gridApi = params.api;
  
  return <AgGridReact onGridReady=onGridReady ... />;

问题是“MyGrid”组件函数会被多次调用，并且在onGridReady函数运行后一次，在我使用它之前将变量重置为null。

我应该只在上面的范围内将变量设为全局吗？

let gridApi = null;
const MyGrid = props =>  ... 

或者这是“useMemo”之类的好用例？

【问题讨论】：

我会说使用useState 挂钩？ const [gridApi, setGridApi] = useState(null)

@Jonathan Hamel - 这会起作用，我从没想过。一旦设置，这个 var 就永远不会改变，有什么理由在模块变量上使用状态？

我想我也可以 useRef 但不知道为什么我会这样做而不是向上移动 var 范围 - reactjs.org/docs/hooks-reference.html#useref

【参考方案1】：

使用这个钩子：

import  useCallback, useState  from 'react';

export default function useAgGrid() 
  const [gridApi, setGridApi] = useState();
  const onGridReady = useCallback(
    (params) => 
      const  api, columnApi  = params;
      setGridApi( api, columnApi );
    ,
    []
  );
  return 
    onGridReady,
    ...gridApi && gridApi
  ;

【参考方案2】：

为什么您需要对网格 api 的引用？您是否查看过本指南以了解 react 16+ https://www.ag-grid.com/react-more-details/#react-16 ？使用 react refs 和 useRef 也是一个不错的选择。

【讨论】：

我需要一个 gridApi 的引用来调整窗口大小。事后我看到了 useRef，这确实很可能是要走的路。我想知道 useRef 与更高级别的闭包变量相比有什么好处？

链接不再解析