Question

如何使用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个。

Answer 1

使用此功能：

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

搜索结果与React JS分页

1 个答案: