如何通过ResponsiveGridLayout调整MaterialReactTable分页行数

核心问题定位 #

• Table组件未将接收的pageSize属性传递给MaterialReactTable实例
• handleResize中遍历所有items可能触发多次重复的state更新，导致不必要的渲染或状态混乱

修复步骤 #

1. 修正Table组件，传递pageSize参数 #

修改Table组件，显式将pageSize传给MaterialReactTable，注意props的放置顺序（若props中包含pageSize，会覆盖显式传递的值，可根据需求调整顺序）：

const Table = ({ data, props, pageSize }) => {
  return (
    <MaterialReactTable
      columns={columns}
      data={data}
      pageSize={pageSize} // 显式传递每页行数参数
      {...props}
    />
  );
};

2. 优化resize事件处理逻辑 #

原代码中遍历所有items会重复调用setPageSize，改为统一计算后再更新状态，避免多次触发state更新：

const handleResize = (items: any) => {
  let targetPageSize = 5;
  let targetContentHeight = "350px";

  items.forEach((item: any) => {
    if (item.h === 2) {
      targetPageSize = 10;
      targetContentHeight = "850px";
    }
  });

  setContentHeight(targetContentHeight);
  setPageSize(targetPageSize);
};

如果只需要处理当前被调整的单个item，可改用find方法定位目标item：

const handleResize = (items: any) => {
  // 替换为匹配当前调整项的判断逻辑，比如根据id匹配
  const currentItem = items.find(item => item.id === /* 当前项id */);
  if (!currentItem) return;

  if (currentItem.h === 2) {
    setContentHeight("850px");
    setPageSize(10);
  } else if (currentItem.h === 1) {
    setContentHeight("350px");
    setPageSize(5);
  }
};

3. 确认组件间props传递链路 #

确保GalleryItem正确接收并传递pageSize到Table，当前代码链路已通，可添加类型检查增强稳定性（可选）：

interface GalleryItemProps {
  messageItem: any;
  contentHeight: string;
  pageSize: number;
  data: any[];
  props: any;
}

const GalleryItem = ({ pageSize, data, props }: GalleryItemProps) => {
  return <Table pageSize={pageSize} data={data} props={props} />;
};

额外注意事项 #

• 若使用服务端分页，需同步将pageSize参数传递给后端接口，更新数据源
• 检查props中是否包含pageSize，若有需确认参数优先级（显式传递或props覆盖）

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