javascript - Meteor 和 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 => ....