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

【问题标题】：How should I hang onto the ag-grid api with React Hooks我应该如何使用 React Hooks 挂在 ag-grid api 上
【发布时间】：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

标签： reactjs closures ag-grid react-hooks ag-grid-react

【解决方案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 与更高级别的闭包变量相比有什么好处？
链接不再解析