Javascript 使用React JS进行搜索结果分页

如何使用React实现搜索分页

这是我返回用户的代码

export default class SearchPanel extends Component {
  static propTypes = {
    isLoading: PropTypes.bool,
    users: PropTypes.array,
  }

  static contextTypes = {
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired,
  }

  static defaultProps = {
    isLoading: false,
    users: [],
  }

  constructor(props, context) {
    super(props, context);
  }

  render() {
    const searchResults = (this.props.isLoading)
      ? <h1>LOADING USERS</h1>
      : this.props.users.map((user) => <SearchResultUser key={user.username}     {...user} />);

    return (
      <div className="ibox-content">
          {this.props.users}
      </div>
    )
  }
}

导出默认类SearchPanel扩展组件{
静态类型={
isLoading:PropTypes.bool，
用户：PropTypes.array，
}
静态上下文类型={
位置：PropTypes.object.isRequired，
历史记录：PropTypes.object.isRequired，
}
静态defaultProps={
孤岛加载：false，
用户：[]，
}
构造函数（道具、上下文）{
超级（道具、背景）；
}
render（）{
const searchResults=（this.props.isLoading）
？加载用户
：this.props.users.map（（user）=>）；
返回(
{this.props.users}
)
}
}

注意：对于这个问题，我将大部分html保留在渲染之外，以使代码看起来简单

简而言之，

this.props.users

返回一个用户数组，我只需要能够将结果分页，比如说每页5个

使用此功能：

getUsers(page, amount) {
  return this.props.users.filter(function(item, i) {
    return i >= amount*(page-1) && i < page*amount
  });
}

getUsers（第页，金额）{
返回this.props.users.filter（函数（项，i）{
返回i>=金额*（第1页）和&i<第*页金额
});
}

例如

{（）=>getUsers（1,5）}

将返回1-5之间的用户，其中

{（）=>getUsers（2,5）}

将返回6-10之间的用户

例如：