React MUI DataGridPro：父工具栏重置所有展开行模型可行性咨询

我使用了带有如下配置的DataGridPro组件，其中详情面板通过renderRowSubComponent生成子DataGridPro实例，子表格支持筛选、排序操作：

<DataGridPro
        apiRef={apiRef}
        density="comfortable"
        autoHeight
        headerHeight={75}
        getRowId={(row) => row.domain_id}
        loading={tableData?.length === 0}
        rows={tableData}
        columns={columns}
        initialState={savedState.initialState}
        pageSize={pageSize}
        rowsPerPageOptions={[10, 25, 50, 100]}
        onPageSizeChange={(newPageSize) => setPageSize(newPageSize)}
        getDetailPanelHeight={getDetailPanelHeight}
        getDetailPanelContent={renderRowSubComponent}
        pagination
        components={{ Toolbar: CustomToolBar }}
        componentsProps={{ toolbar: { onResetFilters: handleResetFilters } }}
/>

我已经自定义了CustomToolBar工具栏，当前的onResetFilters仅能重置父表格的模型：

<GridToolbarContainer>
      <GridToolbarColumnsButton sx={{ ml: 1 }} />
      <GridToolbarFilterButton sx={{ ml: 1 }} />
      <GridToolbarDensitySelector sx={{ ml: 1 }} />
      <GridToolbarExport sx={{ ml: 1 }} />
      <Button
        color="primary"
        rel="noopener"
        size="small"
        startIcon={<RotateLeft />}
        onClick={() => onResetFilters(apiRef.current)}
      >
        {RESET_FILTERS}
      </Button>
</GridToolbarContainer>

现在想实现：通过父级工具栏的重置按钮，一次性清理所有已展开的子表格的筛选、排序模型，不需要给每个子表格单独设置工具栏。

可以实现，核心思路是存储所有子表格的apiRef实例，在父工具栏的重置方法中遍历这些实例，逐一调用重置接口。

步骤1：维护子表格apiRef的存储容器 #

在父组件中创建一个useRef容器，用来保存所有已渲染子表格的apiRef：

// 用useRef存储，避免触发组件重复渲染
const childGridApiRefs = useRef(new Map());

步骤2：在子表格初始化时注册apiRef #

修改renderRowSubComponent，在创建子DataGridPro时，将其apiRef存入容器（用父行的domain_id作为唯一键，避免重复注册）：

const renderRowSubComponent = ({ row }) => {
  const childApiRef = useGridApiRef();

  useEffect(() => {
    // 注册子表格的apiRef
    childGridApiRefs.current.set(row.domain_id, childApiRef);
    // 子表格卸载时从容器中移除
    return () => {
      childGridApiRefs.current.delete(row.domain_id);
    };
  }, [row.domain_id, childApiRef]);

  // 异步获取子表格数据的逻辑...

  return (
    <DataGridPro
      apiRef={childApiRef}
      columns={childColumns}
      rows={childData}
      // 隐藏子表格的工具栏
      components={{ Toolbar: () => null }}
      // 子表格的其他配置...
    />
  );
};

步骤3：修改父级重置方法，批量重置子表格 #

更新handleResetFilters方法，除了重置父表格，还要遍历所有子表格的apiRef执行重置操作：

const handleResetFilters = (parentApiRef) => {
  // 重置父表格的排序、筛选模型
  parentApiRef.setSortModel([]);
  parentApiRef.setFilterModel({ items: [] });

  // 遍历所有子表格apiRef，执行重置
  childGridApiRefs.current.forEach((childApiRef) => {
    if (childApiRef.current) {
      childApiRef.current.setSortModel([]);
      childApiRef.current.setFilterModel({ items: [] });
    }
  });
};

额外优化：处理折叠行的状态清理 #

如果需要在父行折叠时自动清理对应子表格的状态，可以结合父表格的onDetailPanelToggle事件，移除对应子表格的apiRef：

<DataGridPro
  // 其他原有配置...
  onDetailPanelToggle={(params) => {
    // 当行折叠时，移除子表格的apiRef
    if (!params.expanded) {
      childGridApiRefs.current.delete(params.row.domain_id);
    }
  }}
/>

这样就能通过父级工具栏的一个按钮，完成所有父表格和已展开子表格的筛选、排序模型重置，无需为每个子表格单独配置工具栏。

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