我想在我的elasticsearch结果中启用分页，方法是在React Js中的旧结果页下面添加新的结果页

state = {
  currentPage: 1,
  resultsPerPage: 10,
  searchResults: [] // 存储elasticsearch的结果
}

render() {
  const { currentPage, resultsPerPage, searchResults } = this.state;

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

  // 截取elasticsearch结果数组
  const paginatedResults = searchResults.slice(startIndex, endIndex);

  // 渲染分页结果
  return (
    <div>
      {paginatedResults.map(result => (
        // 渲染每个结果的代码
      ))}
      <Pagination
        currentPage={currentPage}
        totalPages={Math.ceil(searchResults.length / resultsPerPage)}
        onPageChange={this.handlePageChange}
      />
    </div>
  );
}

class Pagination extends React.Component {
  handlePageClick = (page) => {
    const { onPageChange } = this.props;
    onPageChange(page);
  }

  render() {
    const { currentPage, totalPages } = this.props;

    // 渲染页码按钮
    const pageButtons = [];
    for (let i = 1; i <= totalPages; i++) {
      pageButtons.push(
        <button
          key={i}
          onClick={() => this.handlePageClick(i)}
          disabled={i === currentPage}
        >
          {i}
        </button>
      );
    }

    // 渲染分页组件
    return (
      <div>
        {pageButtons}
      </div>
    );
  }
}

handlePageChange = (page) => {
  this.setState({ currentPage: page });
}