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

Search result pagination with React JS

本文关键字：搜索结果 分页 React JS 使用      更新时间：2023-09-26

如何使用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分页结果。

使用此函数:

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

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

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

相关文章：