如何在React ag-grid加载后点击按钮动态显示/隐藏分页面板

核心原因 #

ag-grid的pagination属性属于初始化配置项，默认不会随props变化自动同步视图，修改状态后需要主动调用Grid API更新配置才能生效。

实现步骤 #

• 第一步：通过AgGridReact的onGridReady回调获取Grid API实例，使用useRef存储即可，无需存入state触发额外重渲染
• 第二步：切换分页状态的回调中，除了更新本地state，同时调用Grid API的setGridOption方法同步修改grid配置
• 第三步：（可选）如果需要切换分页状态后重置到第一页，可额外调用paginationGoToFirstPage方法

完整示例代码 #

import { useState, useRef } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const GridDemo = () => {
  const [pagination, setPagination] = useState(true);
  // 存储grid api实例
  const gridApiRef = useRef(null);

  const onGridReady = (params) => {
    gridApiRef.current = params.api;
  };

  const togglePagination = () => {
    const newPaginationState = !pagination;
    setPagination(newPaginationState);
    // 主动更新grid配置
    if (gridApiRef.current) {
      gridApiRef.current.setGridOption('pagination', newPaginationState);
      // 可选：切换后重置到第一页
      // gridApiRef.current.paginationGoToFirstPage();
    }
  };

  const columnDefs = [
    { field: 'name' },
    { field: 'year' }
  ];

  // 替换为实际业务行数据
  const rowData = [
    { name: '测试1', year: 2021 },
    { name: '测试2', year: 2022 },
    { name: '测试3', year: 2023 }
  ];

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <button onClick={togglePagination}>Show/Hide Pagination</button>
      
      <AgGridReact
        onGridReady={onGridReady}
        pagination={pagination}
        columnDefs={columnDefs}
        rowData={rowData}
        paginationPageSize={10}
      />
    </div>
  );
};

export default GridDemo;

版本兼容说明：如果使用ag-grid < 28版本，替换setGridOption调用为gridApiRef.current.paginationSetEnabled(newPaginationState)即可。

内容的提问来源于stack exchange，提问作者Steve Gorman