如何基于ReactJs封装AG-GRID，实现无需手动编写数据获取逻辑的可复用组件？

设计目标 #

这个封装组件的核心作用是消除AG-GRID常规使用中的重复代码，隐藏数据请求、参数适配、结果回填的复杂度，业务开发者无需再自行编写表格查询相关的接口调用逻辑，仅需传入核心配置即可快速完成表格开发。

组件对外暴露的核心参数 #

• 必传参数 apiUrl：字符串类型，对应后端数据查询接口的完整地址，支持提前拼接固定查询参数
• 必传参数 columnDefs：数组类型，完全符合AG-GRID官方规范的列定义配置，原有AG-GRID列配置的所有能力均可正常使用
• 可选参数 gridOptions：对象类型，可传入自定义AG-GRID全局配置，未传值时组件默认启用通用分页、单字段排序、前端过滤规则
• 可选参数 requestAdapter：函数类型，可自定义请求参数格式适配不同后端的接口规范，默认会直接把AG-GRID生成的分页、排序、过滤参数拼接为请求Query
• 可选参数 responseAdapter：函数类型，可自定义接口返回值的解析规则，适配不同后端的数据返回格式

组件内部自动处理的逻辑 #

组件内部默认封装了完整的表格数据交互流程，开发者无需关注以下实现细节：

• 自动监听AG-GRID的所有查询条件变更：包括分页切换、字段排序调整、过滤条件修改、每页展示条数修改等操作，都会自动触发数据重新拉取
• 统一处理请求全流程：内置请求loading状态、错误捕获、空数据兜底逻辑，请求过程中自动显示AG-GRID内置加载动画，请求失败会展示可自定义的错误提示
• 自动适配数据回填：接口返回数据会自动处理为AG-GRID可识别的格式，同时自动更新总条数、当前页码等分页参数，无需手动赋值

这套封装可以覆盖90%以上的后台管理系统表格场景，业务侧代码量可以减少70%以上

最简使用示例 #

// 业务侧仅需引入组件、配置列定义即可完成表格开发
import React from 'react'
import AgGridWithAutoRequest from './AgGridWithAutoRequest'

const BusinessOrderTable = () => {
  // 仅需定义AG-GRID列配置
  const columnDefs = [
    { field: 'orderId', headerName: '订单ID', width: 120 },
    { field: 'orderName', headerName: '订单名称', width: 200 },
    { field: 'amount', headerName: '订单金额', width: 120 },
    { field: 'createTime', headerName: '创建时间', width: 180 }
  ]

  return (
    <div style={{ height: 600, width: '100%' }}>
      <AgGridWithAutoRequest 
        apiUrl="/api/order/list"
        columnDefs={columnDefs}
      />
    </div>
  )
}

export default BusinessOrderTable

特殊场景适配方案 #

如果后端接口的参数格式、返回格式和组件默认规则不匹配，不需要修改组件核心逻辑，仅需传入对应的适配函数即可：

// 适配分页参数为pageNum/pageSize、返回数据嵌套在data.list中的后端接口
<AgGridWithAutoRequest 
  apiUrl="/api/order/list"
  columnDefs={columnDefs}
  // 自定义请求参数适配
  requestAdapter={(gridParams) => ({
    pageNum: Math.floor(gridParams.start / gridParams.rowCount) + 1,
    pageSize: gridParams.rowCount,
    sortInfo: gridParams.sortModel,
    filterInfo: gridParams.filterModel
  })}
  // 自定义返回数据适配
  responseAdapter={(apiResponse) => ({
    rowData: apiResponse.data.list,
    totalRowCount: apiResponse.data.total
  })}
/>

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