Wie füge ich mithilfe der React-Bootstrap-Paginierung dynamisch Paginierungsellipsen hinzu?
Ich habe ein funktionierendes API-Projekt, einschließlich Pagination.First、Pagination.Prev、Pagination.Item、Pagination.Next 和 Pagination.Last.
Ich möchte Pagination.Ellipsis hinzufügen, weiß aber nicht, wie ich es in meinen Code einfügen soll.
Sehen Sie sich die Paginierungsdokumentation „react-bootstrap.github.io“ an
Dies ist ein Beispiel dafür, was ich mit der Paginierungs-Ellipse-SandboxEllipses erreichen möchte.
Das Folgende ist mein Code, der auch der Sandbox-Code https://codesandbox.io/ ist.
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;
Ich habe einige Problemumgehungen wie <Pagination.Ellipsis key={pageNumbers} className="muted" /> und ff-Code ausprobiert ... aber es funktioniert nicht.
// 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" />);
}
