ReactPaginate 顶部和底部分页器答案

【问题标题】：ReactPaginate Top and Bottom PaginatorReactPaginate 顶部和底部分页器
【发布时间】：2022-12-14 11:04:29
【问题描述】：

分页项目：

const CarsSection = () => {
  const itemsPerPage = 8;
  const [itemOffset, setItemOffset] = useState(0);
  const endOffset = itemOffset + itemsPerPage;
  const currentItems = carsData.slice(itemOffset, endOffset);
  const pageCount = Math.ceil(carsData.length / itemsPerPage);

  const handlePageClick = (event) => {
    const newOffset = (event.selected * itemsPerPage) % carsData.length;
    setItemOffset(newOffset);
  };


  return (
    <>
        <PaginateContainer>
          <ReactPaginate
            nextLabel=">"
            onPageChange={handlePageClick}
            pageRangeDisplayed={3}
            marginPagesDisplayed={2}
            pageCount={pageCount}
            previousLabel="<"
            pageClassName="page-item"
            pageLinkClassName="page-link"
            previousClassName="page-item"
            previousLinkClassName="page-link"
            nextClassName="page-item"
            nextLinkClassName="page-link"
            breakLabel="..."
            breakClassName="page-item"
            breakLinkClassName="page-link"
            containerClassName="pagination"
            activeClassName="active"
            renderOnZeroPageCount={null}
          />
        </PaginateContainer>
        <CarsContainer>
          <Items currentItems={currentItems} />
        </CarsContainer>

//Same <ReactPaginate /> (code is too big couldn't put it down)//


    </>
  );
};

export default CarsSection;

所以基本上我有两个分页器：顶部和底部。问题是，当我在底部状态下单击分页器时，顶部分页器不会发生变化。

我尝试使用 ForcePage 道具但不知道要放入什么

【问题讨论】：

标签： javascript html css reactjs react-paginate

【解决方案1】：

来自https://www.npmjs.com/package/react-paginate：

forcePage - 数字 - 用父属性覆盖选定的页面。如果您想从您的应用程序状态控制页面，请使用此选项。
const [page, setPage] = useState(0);
<ReactPaginate
  forcePage={page}
  onPageChange={page => setPage(page)}
  ...
/>

【讨论】：