如何在自定义布局中使用react-admin的<Pagination />组件

方法一：利用ListContext（推荐，符合React-admin设计） #

React-admin的<Pagination />组件依赖ListContext提供的分页状态（当前页、总条数、每页条数）和操作方法（切换页码、修改每页条数）。<ListBase />是提供这个上下文的基础组件，之前使用失败大概率是因为缺少必要的配置项（比如sort或resource）。

实现步骤： #

• 用<ListBase />作为容器，配置resource、初始分页和排序规则；
• 在子组件中通过useListContext钩子获取数据和分页状态；
• 渲染自定义网格布局，直接放置<Pagination />（它会自动从上下文读取所需参数）。

代码示例： #

import { ListBase, Pagination, useListContext } from 'react-admin';

// 自定义网格组件
const CustomGrid = () => {
  const { data, total } = useListContext();

  if (!data) return <div>加载中...</div>;

  return (
    <>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '1rem' }}>
        {data.map(record => (
          <div key={record.id} style={{ padding: '1rem', border: '1px solid #eee', borderRadius: '4px' }}>
            <h4>{record.title}</h4>
            <p>{record.body}</p>
          </div>
        ))}
      </div>
      {/* 直接使用Pagination，自动关联上下文状态 */}
      <div style={{ marginTop: '2rem', textAlign: 'center' }}>
        <Pagination />
      </div>
    </>
  );
};

// 页面入口
const CustomGridPage = () => (
  <ListBase
    resource="posts" // 替换为你的资源名称
    pagination={{ page: 1, perPage: 9 }} // 初始分页配置
    sort={{ field: 'id', order: 'ASC' }} // 必须配置排序规则，否则无法请求数据
  >
    <CustomGrid />
  </ListBase>
);

export default CustomGridPage;

方法二：手动管理分页状态（适合脱离ListContext的场景） #

如果不想依赖<ListBase />，可以手动管理分页状态，直接调用dataProvider获取数据，再将分页参数手动传递给<Pagination />。

代码示例： #

import { useDataProvider, Pagination } from 'react-admin';
import { useState, useEffect } from 'react';

const CustomPaginationGrid = () => {
  const dataProvider = useDataProvider();
  const [data, setData] = useState([]);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [perPage, setPerPage] = useState(9);

  // 分页参数变化时重新请求数据
  useEffect(() => {
    dataProvider.getList('posts', {
      pagination: { page, perPage },
      sort: { field: 'id', order: 'ASC' },
      filter: {}, // 可添加自定义过滤条件
    }).then(res => {
      setData(res.data);
      setTotal(res.total);
    });
  }, [dataProvider, page, perPage]);

  return (
    <>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '1rem' }}>
        {data.map(record => (
          <div key={record.id} style={{ padding: '1rem', border: '1px solid #eee', borderRadius: '4px' }}>
            <h4>{record.title}</h4>
            <p>{record.body}</p>
          </div>
        ))}
      </div>
      {/* 手动传递分页参数给Pagination */}
      <div style={{ marginTop: '2rem', textAlign: 'center' }}>
        <Pagination
          page={page}
          perPage={perPage}
          total={total}
          setPage={setPage}
          setPerPage={setPerPage}
        />
      </div>
    </>
  );
};

export default CustomPaginationGrid;

注意事项 #

• 方法一无需手动处理数据请求和状态同步，更适合大多数场景；
• 确保resource名称与你的dataProvider配置一致；
• 如果需要添加过滤功能，方法一可结合useListContext的filter和setFilter，方法二则需手动管理过滤状态并传入getList。

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