如何在React中使按钮分页工作

import React, { Component } from 'react';

class Pagination extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentPage: 1,
      pageSize: 10,
      data: [] // 假设这是要进行分页的数据
    };
  }

  render() {
    const { currentPage, pageSize, data } = this.state;
    const startIndex = (currentPage - 1) * pageSize;
    const endIndex = startIndex + pageSize;
    const totalPages = Math.ceil(data.length / pageSize);

    const pageButtons = Array.from({ length: totalPages }, (_, index) => index + 1).map(page => (
      <button key={page} onClick={() => this.setState({ currentPage: page })}>
        {page}
      </button>
    ));

    const currentPageData = data.slice(startIndex, endIndex);

    return (
      <div>
        <div className="data-container">
          {/* 根据currentPageData渲染数据内容 */}
          {currentPageData.map(item => (
            <div key={item.id}>{item.name}</div>
          ))}
        </div>
        <div className="pagination-buttons">
          {/* 渲染分页按钮 */}
          {pageButtons}
        </div>
      </div>
    );
  }
}

export default Pagination;