在React类组件中实现带自定义分页操作的Material-UI Table

MUI Table及分页组件本身兼容类组件调用，官方函数组件示例中用到的Hook相关逻辑，均可通过类组件的state和生命周期方法等价实现，不会出现Hook调用异常问题。

核心实现步骤 #

• 在类组件构造函数中初始化分页相关状态，默认对齐MUI分页组件的参数规则：page为当前页码，默认从0开始；rowsPerPage为每页展示行数，默认可设为10；同时存储表格全量数据源。
• 绑定分页事件处理方法，分别处理页码切换、每页行数修改的操作，通过setState更新对应状态。
• 渲染表格时，将TablePagination组件的属性和类组件的状态、处理方法绑定，分页切片展示当前页的表格行数据即可。

关键代码示例 #

状态初始化与方法绑定 #

class CustomTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      rows: [], // 表格全量数据源
      page: 0,
      rowsPerPage: 10
    };
    // 绑定方法this指向
    this.handleChangePage = this.handleChangePage.bind(this);
    this.handleChangeRowsPerPage = this.handleChangeRowsPerPage.bind(this);
  }

分页事件处理方法 #

// 切换页码
  handleChangePage(event, newPage) {
    this.setState({ page: newPage });
  }

  // 修改每页行数
  handleChangeRowsPerPage(event) {
    this.setState({
      rowsPerPage: +event.target.value,
      page: 0 // 修改每页行数后自动回到第一页，对齐官方交互逻辑
    });
  }

分页组件渲染 #

render() {
    const { rows, page, rowsPerPage } = this.state;
    // 切片获取当前页需要展示的数据
    const currentPageRows = rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);

    return (
      <TableContainer component={Paper}>
        <Table>
          {/* 表格表头、表体逻辑和官方示例完全一致，使用currentPageRows渲染行数据 */}
          <TableHead>
            {/* 表头列定义 */}
          </TableHead>
          <TableBody>
            {currentPageRows.map(row => (
              <TableRow key={row.id}>
                {/* 行单元格内容 */}
              </TableRow>
            ))}
          </TableBody>
          <TableFooter>
            <TableRow>
              <TablePagination
                colSpan={/* 表格列数，对齐表头列数即可 */}
                count={rows.length}
                page={page}
                onPageChange={this.handleChangePage}
                rowsPerPage={rowsPerPage}
                onRowsPerPageChange={this.handleChangeRowsPerPage}
                rowsPerPageOptions={[5, 10, 25, 50]} // 自定义每页行数可选值
                labelRowsPerPage="每页行数："
                labelDisplayedRows={({ from, to, count }) => `${from}-${to} 共 ${count} 条`}
              />
            </TableRow>
          </TableFooter>
        </Table>
      </TableContainer>
    )
  }
}

注意事项 #

• 如果需要异步拉取表格数据，将函数组件中useEffect的请求逻辑迁移到类组件的componentDidMount、componentDidUpdate生命周期方法中即可，不要在类组件的任意位置调用React Hook。
• 若需要扩展排序、筛选等其他表格功能，对应状态也统一放到类组件的state中管理，交互逻辑和函数组件写法无本质差异。

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