从render方法(React)中提取分页

import React from 'react';

class Pagination extends React.Component {
  render() {
    const { totalItems, itemsPerPage, currentPage } = this.props;
    const totalPages = Math.ceil(totalItems / itemsPerPage);

    // 根据当前页码和每页显示数量计算起始索引和结束索引
    const startIndex = (currentPage - 1) * itemsPerPage;
    const endIndex = startIndex + itemsPerPage;

    // 从总数据中截取出当前页的数据
    const currentPageData = this.props.data.slice(startIndex, endIndex);

    return (
      <div>
        {/* 分页展示的内容 */}
        {currentPageData.map((item) => (
          <div key={item.id}>{item.name}</div>
        ))}

        {/* 分页导航 */}
        <div>
          {/* 显示当前页码和总页数 */}
          <span>当前页：{currentPage}</span>
          <span>总页数：{totalPages}</span>

          {/* 可以根据需要添加上一页和下一页的按钮 */}
          <button onClick={this.handlePrevPage}>上一页</button>
          <button onClick={this.handleNextPage}>下一页</button>
        </div>
      </div>
    );
  }
}

export default Pagination;