Comment ajouter dynamiquement des ellipses de pagination à l'aide de la pagination bootstrap de réaction ?

Question

J'ai un projet d'API fonctionnel comprenant Pagination.First、Pagination.Prev、Pagination.Item、Pagination.Next 和 Pagination.Last.

Je souhaite ajouter Pagination.Ellipsis dessus mais je ne sais pas comment l'insérer dans mon code.

Voir la documentation sur la pagination réagir-bootstrap.github.io

Ceci est un exemple de ce que j'essaie de réaliser en utilisant les points de suspension de pagination Ellipses.

Ce qui suit est mon code, qui est également le code du bac à sable https://codesandbox.io/.

Movielist.js

import { React, useState, useEffect } from "react";
import { Col, Card, Row, Pagination } from "react-bootstrap";
import MovieListPagination from "./MovieListPagination";

const MovieList = () => {
  const [error, setError] = useState(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [items, setItems] = useState([]);
  // Default current pages and posts
  const [currentPage, setCurrentPage] = useState(1);
  const [postsPerPage] = useState(4);
  // Get current posts
  const indexOfLastPost = currentPage * postsPerPage;
  const indexOfFirstPost = indexOfLastPost - postsPerPage;
  const currentPosts = items.slice(indexOfFirstPost, indexOfLastPost);
  // Change page
  const paginate = (pageNumber) => setCurrentPage(pageNumber);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((res) => res.json())
      .then(
        (result) => {
          setIsLoaded(true);
          setItems(result);
          //console.log(result.results);
        },
        (error) => {
          setIsLoaded(true);
          setError(error);
        }
      );
  }, []);

  if (error) {
    return <div className="p-3">Error: {error.message}</div>;
  } else if (!isLoaded) {
    return <div className="p-3">Loading...</div>;
  } else {
    return (
      <>
        <Row className="justify-content-center">
          {currentPosts.map((item) => (
            <Col sm={6} lg={4} xl={3} className="py-3" key={item.id}>
              <Card bg="dark" text="light" className="text-center h-100">
                <Card.Body>
                  <Card.Title>{item.title}</Card.Title>
                  <Card.Text>{item.body}</Card.Text>
                </Card.Body>
              </Card>
            </Col>
          ))}
          <Pagination className="justify-content-center">
            <MovieListPagination
              currentPage={currentPage}
              postsPerPage={postsPerPage}
              totalPosts={items.length}
              paginate={paginate}
            />
          </Pagination>
        </Row>
      </>
    );
  }
};

export default MovieList;

MovielistPagination.js

import { React } from "react";
import { Pagination } from "react-bootstrap";

const MovieListPagination = ({
  currentPage,
  postsPerPage,
  totalPosts,
  paginate
}) => {
  const pageNumbers = [];
  const pagesCount = Math.ceil(totalPosts / postsPerPage);
  const isCurrentPageFirst = currentPage === 1;
  const isCurrentPageLast = currentPage === pagesCount;
  for (let i = 1; i <= pagesCount; i++) {
    pageNumbers.push(i);
  }
  return (
    <>
      <Pagination.First onClick={() => paginate(1)} />
      <Pagination.Prev
        onClick={() => paginate(currentPage - 1)}
        disabled={isCurrentPageFirst}
      />
      {pageNumbers.map((number) => (
        <Pagination.Item
          key={number}
          className={`${currentPage === number ? "active" : ""}`}
          onClick={() => {
            paginate(number);
          }}
        >
          {number}
        </Pagination.Item>
      ))}
      <Pagination.Next
        onClick={() => paginate(currentPage + 1)}
        disabled={isCurrentPageLast}
      />
      <Pagination.Last onClick={() => paginate(pagesCount)} />
    </>
  );
};

export default MovieListPagination;

J'ai essayé quelques solutions de contournement comme <Pagination.Ellipsis key={pageNumbers} className="muted" /> et le code ff... mais cela ne fonctionne pas.

  // Add ellipses if there are more pages to display
  if (pageNumbers[0] > 1) {
    pageNumbers.unshift(<Pagination.Ellipsis key="ellipsis-start" />);
  }
  if (pageNumbers[pageNumbers.length - 1] < totalPosts) {
    pageNumbers.push(<Pagination.Ellipsis key="ellipsis-end" />);
  }

Answer 1

Ma réponse actuelle à la question est d'utiliser React-paginate. Vous pouvez trouver mes réponses fourchues sur codesandbox.

Je vais garder ma question ouverte, peut-être que quelqu'un pourra m'aider. Merci!