简单分页的流星和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 => ....