我使用NodeJS和React,我遇到了问题。我没有找到一个npm模块或代码,允许我为结果列表创建一个分页。
我有一个名为“jobs”的变量,其中包含招聘广告列表。 在我的渲染函数中,我调用:
{this.state.jobs.map(this.renderClass)}
使用函数映射每个作业。
此函数是renderClass,包含渲染:
<section key={c.id} className="panel panel-featured-left panel-featured-primary">
<Link to={'/job/'+c.id}>
<div className="panel-body">
<div className="widget-summary">
<div className="widget-summary-col widget-summary-col-icon">
<div className="summary-icon">
<img src={image} className="img-responsive" />
</div>
</div>
<div className="widget-summary-col">
<div className="summary">
<h4 className="title">{c.company}</h4>
<div className="info">
<strong className="amount"></strong><br/>
<p><i className="fa fa-map-marker"></i> {c.location}</p>
<p><i className="fa fa-suitcase"></i> {c.position}</p>
</div>
</div>
<div className="summary-footer">
<a className="text-muted text-uppercase"><i className="fa fa-calendar"></i> {day}/{month}/{year}</a>
</div>
</div>
</div>
</div>
</Link>
</section>
通过这种方式,我有一个庞大的工作列表,但我会分页。
我该怎么做?
由于
答案 0 :(得分:0)
我会将页面保存在某个州,
并做类似的事情(比如每页有10个工作) -
{this.state.jobs.slice(this.state.page * 10, this.state.page * 10 + 10)
.map(this.renderClass)}
答案 1 :(得分:0)
我建议您需要构建一个用于处理分页的组件。有点像这样:
<Pagiantion
listLenght = {111}
selectedPage = {1}
itemPerPage = {10}
....
/>
我找到了处理它的最佳组件react-pagination-custom。 它允许您自定义所有内容(数字按钮,包装容器,传播,...)。它的文件很好,演示也很清楚。