如何使用 React Bootstrap 分页动态添加活动类？

Question

我有一个工作正常的项目 api，我在

className

上添加了活动的

Pagination.Item

但它不起作用。我不确定我是否错过了其他让它起作用的东西。

查看分页文档react-bootstrap.github.io

下面是我的代码，也是沙盒代码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
              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 = [];
  for (let i = 1; i <= Math.ceil(totalPosts / postsPerPage); i++) {
    pageNumbers.push(i);
  }
  return (
    <>
      <Pagination.First />
      <Pagination.Prev />
      {pageNumbers.map((number) => (
        <Pagination.Item
          key={number}
          className={`${currentPage === number ? "active" : ""}`}
          onClick={() => {
            paginate(number);
          }}
        >
          {number}
        </Pagination.Item>
      ))}
      <Pagination.Next />
      <Pagination.Last />
      {/* {item.alt_description ? item.alt_description : item.user.name + ' Collection'} */}
    </>
  );
};

export default MovieListPagination;

Answer 1

传递

currentPage

给组件

<MovieListPagination
  currentPage={currentPage}     // You missed this line
  postsPerPage={postsPerPage}
  totalPosts={items.length}
  paginate={paginate}
/>

Answer 2

你忘了将

currentPage

属性传递给

MovieListPagination

组件

    <MovieListPagination
  currentPage={currentPage}     // add this line
  postsPerPage={postsPerPage}
  totalPosts={items.length}
  paginate={paginate}
/>

Answer 3

在该组件中，您使用“currentPage”属性，但在使用该组件时不要传递该属性。在使用组件的时候，必须传递这样的 props：

`<MovieListPagination
     currentPage={currentPage}     <<
     postsPerPage={postsPerPage}
     totalPosts={items.length}
     paginate={paginate} 
  />`

另外，即使你通过了这个道具，你也不会看到这个类，因为你没有正确使用验证。我假设您想使用类型检查。如果你想使用类型检查，你必须 typecheck

className={``${typeof currentPage === "number" ? “活跃”：“”}`}