シンプル流星のためのページネーションとReactJS

Question

私はこのコードを持って、

renderMsg(){ 
    return this.props.msgList.map((item) => { 
      return (
       <tr key={item._id} id={item._id} className={(item.status == "unread")? "unread":""}> 
         <td className="inbox-small-cells"> 
          <input type="checkbox" className="mail-checkbox" /> 
         </td> 
        </tr> 
      ); 

    }); 
} 

。この関数はテーブル行のリストを出力します。

たとえば、この関数は最初の50だけを表示します。ユーザーは次のページを選択できます。リストの番号51〜100が表示されます。

どうすればいいですか？

Answer 1

コンポーネントの状態にcurrentPageIndexを入れ、マッピングする前に配列をスライスします。 0ベースのインデックスを使用すると仮定します：

const { currentPage } = this.state; 
const { msgList, pageSize } = this.props; 
msgList 
    .slice(currentPage * pageSize, (currentPage + 1) * pageSize) 
    .map(item => ....