[英]Search result pagination with React JS
How would one implement pagination for search using React? 如何使用React实现分页搜索?
Here's my code for returning users. 这是我的老用户代码。
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>
)
}
}
Note: I've kept most of the html out of the render to keep the code looking simple for this question. 注意:为了使此问题的代码看起来简单,我将大多数html排除在了渲染之外。
So in a nutshell, this.props.users
returns an array of users, I just need to be able to paginate the result by lets say 5 per page. 简而言之, this.props.users
返回一个用户数组,我只需要能够通过说每页5个来分页结果。
Use this function: 使用此功能:
getUsers(page, amount) {
return this.props.users.filter(function(item, i) {
return i >= amount*(page-1) && i < page*amount
});
}
Eg {() => getUsers(1, 5)}
will return users between 1-5, where {() => getUsers(2,5)}
will return users between 6-10. 例如{() => getUsers(1, 5)}
将返回1-5之间的用户,其中{() => getUsers(2,5)}
将返回6-10之间的用户。
Example: http://codepen.io/zvona/pen/GpEdqN?editors=001 示例: http : //codepen.io/zvona/pen/GpEdqN?editors = 001
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.