对部分做出反应

时间:2016-09-11 15:42:15

标签: node.js reactjs pagination

我使用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>&nbsp;{c.location}</p>
                                    <p><i className="fa fa-suitcase"></i>&nbsp;{c.position}</p>
                                </div>
                            </div>
                            <div className="summary-footer">
                                <a className="text-muted text-uppercase"><i className="fa fa-calendar"></i>&nbsp;{day}/{month}/{year}</a>
                            </div>
                        </div>
                    </div>
                </div>
            </Link>
            </section>

通过这种方式,我有一个庞大的工作列表,但我会分页。

我该怎么做?

由于

2 个答案:

答案 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。 它允许您自定义所有内容(数字按钮,包装容器,传播,...)。它的文件很好,演示也很清楚。