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

Question

ag-grid 建议获取指向网格 api 的指针作为其 onGridReady 回调中的变量，如果需要的话。使用 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 Hook 执行此操作的正确模式是什么？到目前为止，这是我的代码；

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”之类的一个很好的用例吗？

Answer 1

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

Answer 2

使用这个钩子：

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
  };
}

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

How should I hang onto the ag-grid api with React Hooks

closures

reactjs

ag-grid

ag-grid-react

react-hooks