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

【问题标题】：Search result pagination with React JS使用 React JS 进行搜索结果分页
【发布时间】：2015-10-09 10:42:45
【问题描述】：

如何使用 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>
    )
  }
}

注意：我已将大部分 html 保留在渲染之外，以使该问题的代码看起来简单。

所以简而言之，this.props.users 返回一个用户数组，我只需要能够将结果分页，比如说每页 5 个。

【问题讨论】：

标签： javascript node.js reactjs

【解决方案1】：

使用此功能：

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

例如，{() => getUsers(1, 5)} 将返回 1-5 之间的用户，{() => getUsers(2,5)} 将返回 6-10 之间的用户。

示例：http://codepen.io/zvona/pen/GpEdqN?editors=001

【讨论】：