推荐一款超实用的React分页组件 - react-js-pagination

import React from 'react';
import Pagination from 'react-js-pagination';
 
class PaginationComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activePage: 1,
    };
    this.handlePageChange = this.handlePageChange.bind(this);
  }
 
  handlePageChange(pageNumber) {
    this.setState({ activePage: pageNumber });
    // 这里可以添加获取数据的逻辑，例如从API加载数据
    // 你可以使用 `pageNumber` 作为请求的一部分或者状态管理器中的状态
  }
 
  render() {
    const { itemsCount } = this.props; // 假设从父组件传入itemsCount
    const { activePage } = this.state;
    return (
      <Pagination
        activePage={activePage}
        itemsCountPerPage={10} // 假设每页显示10个项目
        totalItemsCount={itemsCount}
        onChange={this.handlePageChange}
      />
    );
  }
}
 
export default PaginationComponent;

这个代码示例展示了如何在React组件中使用react-js-pagination库来实现分页功能。组件有一个构造函数来初始化状态，handlePageChange方法用于处理页面变化，并更新组件的状态。render函数中渲染分页组件，并将必要的属性传入，如当前激活页、每页项目数、总项目数，以及页面变更时的处理函数。