React-Admin分页组件深度解析：从基础使用到无限滚动-优快云博客

React-Admin分页组件深度解析：从基础使用到无限滚动

react-admin react-admin: 是一个基于 React 和 RESTful API 的开源前端框架，用于快速构建具有完整权限管理功能的 Web 应用程序。适合开发者创建企业级的数据管理和呈现系统。项目地址: https://gitcode.com/gh_mirrors/re/react-admin

分页组件概述

在React-Admin项目中，<Pagination>组件是数据列表展示的核心组成部分之一。它为用户提供了直观的页面导航功能，允许用户在不同数据页之间切换，并自定义每页显示的数据量。

基础使用方式

默认情况下，<List>组件会自动集成<Pagination>组件。这个基础实现已经包含了完整的页面导航功能：

上一页/下一页按钮
当前页周围的页码按钮
每页显示行数的选择器

自定义分页组件

开发者可以通过创建自定义分页组件来满足特定需求：

import { Pagination } from 'react-admin';

const CustomPagination = () => (
  <Pagination rowsPerPageOptions={[15, 30, 60, 120]} />
);

然后在列表组件中使用这个自定义分页：

import { List } from 'react-admin';
import CustomPagination from './CustomPagination';

export const ProductList = () => (
  <List pagination={<CustomPagination />}>
    {/* 列表内容 */}
  </List>
);

关键配置项详解

rowsPerPageOptions

这个属性允许你自定义每页显示行数的选项：

<Pagination rowsPerPageOptions={[5, 10, 25, 50]} />

如果需要禁用行数选择功能，可以传递空数组：

<Pagination rowsPerPageOptions={[]} />

移动端优化：无限滚动

在移动设备上，传统的分页按钮可能不是最佳用户体验。React-Admin提供了<InfiniteList>组件来实现无限滚动效果：

import { InfiniteList, Datagrid, TextField } from 'react-admin';

const CommentList = () => (
  <InfiniteList>
    <Datagrid>
      <TextField source="id" />
      <TextField source="content" />
    </Datagrid>
  </InfiniteList>
);

无限滚动的特点：

初始加载部分数据
当用户滚动到底部时自动加载更多
显示加载指示器而非分页按钮
特别适合移动端和大量数据的场景

性能优化建议

合理设置每页行数：根据数据类型和网络状况选择适当的默认值
服务器端分页：确保API支持分页查询，避免一次性加载全部数据
缓存策略：考虑实现数据缓存减少重复请求
虚拟滚动：对于超长列表，可以结合虚拟滚动技术提升性能

进阶使用场景

自定义分页样式

通过覆写CSS类名，可以完全自定义分页组件的外观：

import { makeStyles } from '@material-ui/core/styles';
import { Pagination } from 'react-admin';

const useStyles = makeStyles({
  pagination: {
    backgroundColor: '#f5f5f5',
    borderRadius: '4px',
    padding: '10px'
  }
});

const StyledPagination = () => {
  const classes = useStyles();
  return <Pagination className={classes.pagination} />;
};