Reactjs 对react引导表使用分页

我正在使用CreateReact应用程序和react引导程序构建一个基本的react应用程序。我正在使用react引导表来显示信息。我试图让分页为表工作，但我不知道如何绕过它来处理表。下面是我的组件的代码片段，我添加了react bootstrap中的分页代码段，它只在底部显示分页页脚，但实际上并不分页结果。 App.js

import React，{Component}来自'React'；
从“react bootstrap/lib/Table”导入表；
从“react bootstrap/lib/Pagination”导入分页；
导出类应用程序扩展组件{
renderList（）{
返回(
名称
描述
叉子
克隆URL
{this.state.response.map（（对象）=>{
返回(
{object.name}
{object.description}
{object.forks_count}
{object.clone_url}
);
})}
);
}
渲染图像（）{
设项目=[]；
对于（设数字=1；数字
{this.renderPagination（）}
);
}
}

如何在表格上对结果进行分页？

2种处理方法：

仅使用前端分页：获取整个结果，并用列表大小（例如10）划分结果，假设总共有50个列表项，因此有50/10==5页。对于每个分页项目，添加一个“onClick”并更改显示的页面

使用前端和后端分页：只获取结果的特定部分，并在前端处理它。（有关更多详细信息，请搜索Spring JPA分页。）

import React, { Component } from 'react';
import Table from 'react-bootstrap/lib/Table';
import Pagination from 'react-bootstrap/lib/Pagination';

export class App extends Component {

renderList() {
  return(
    <Table striped hover bordered condensed>
      <thead>
        <tr>
          <th>Name</th>
          <th>Description</th>
          <th>Forks</th>
          <th>Clone URL</th>
        </tr>
      </thead>
      <tbody>
        {this.state.response.map((object) => {
          return (
            <tr>
              <td><a onClick={this.handleClick.bind(this,object)}>{object.name} </a></td>
              <td>{object.description}</td>
              <td><Glyphicon glyph="cutlery" /> {object.forks_count}</td>
              <td>{object.clone_url}</td>
            </tr>
          );
        })}
        </tbody>
      </Table>
    );
  }

  renderPagination() {
    let items = [];
    for (let number = 1; number <= 10; number++) {
      items.push(
       <Pagination.Item>{number}</Pagination.Item>
      );
    }
    return (
      <Pagination bsSize="small">{items}</Pagination>
    );
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Netflix Repositories</h1>
        </header>
        {this.renderList()}
        <CommitList ref={(ref) => this.commitList = ref} 
          show={this.state.show}
          commits={this.state.commits} />
        {this.renderPagination()}
      </div>
    );
  }
}