セクションのページ分割を反応させる

Question

Im ReactでNodeJSを使用していますが、問題があります。私は結果のリストのためにページネーションを作成することを可能にする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が見つかりました。 それはすべてのカスタム（番号ボタン、ラップコンテナ、スプレッド..）を可能にします。そのドキュメントはよく、デモも明らかです。