簡單分頁的流星和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> 
      ); 

    }); 
} 

我想添加分頁此renderMsg功能。該函數將輸出表格行的列表。

因此，例如，此功能將只顯示前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 => ....