Question

我使用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>

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

我该怎么做？

由于

Answer 1

我会将页面保存在某个州，

并做类似的事情（比如每页有10个工作） -

{this.state.jobs.slice(this.state.page * 10, this.state.page * 10 + 10)
                .map(this.renderClass)}

Answer 2

我建议您需要构建一个用于处理分页的组件。有点像这样：

<Pagiantion
 listLenght = {111}
 selectedPage = {1}
 itemPerPage = {10}
 ....
/>

我找到了处理它的最佳组件react-pagination-custom。它允许您自定义所有内容（数字按钮，包装容器，传播，...）。它的文件很好，演示也很清楚。

对部分做出反应

2 个答案: