如何在 React 的分页中添加活动类答案

【问题标题】：How to add active class to the pagination in React如何在 React 的分页中添加活动类
【发布时间】：2021-06-22 20:58:24
【问题描述】：

我有一个这样的分页组件：

import React from "react";
import { Link } from "react-router-dom";

const Pagination = ({ currentPage, postsPerPage, totalPosts, paginate }) => {
  const pageNumbers = [];
  for (let i = 1; i <= Math.ceil(totalPosts / postsPerPage); i++) {
    pageNumbers.push(i);
  }
  return (
    <nav>
      <ul className="pagination">
        <li class="page-item">
          <Link class="page-link" to={currentPage-1} onClick={() => paginate(currentPage-1)} aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
            <span class="sr-only">Previous</span>
          </Link>
        </li>
        {pageNumbers.map((number) => (
          <li key={number} className="page-item">
            <Link
              onClick={() => paginate(number)}
              to={number}
              className="page-link"
            >
              {number}
            </Link>
          </li>
        ))}
        <li class="page-item">
          <Link class="page-link" to={currentPage+1} onClick={() => paginate(currentPage+1)} aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
            <span class="sr-only">Next</span>
          </Link>
        </li>
      </ul>
    </nav>
  );
};

export default Pagination;

所以，我想做的是，例如，当它位于第 5 页时，我想向该 li 添加活动类，以便我可以弄清楚我在哪个页面上。你能给我一个建议吗？

谢谢

【问题讨论】：

标签： reactjs class pagination

【解决方案1】：

您不能像这样为currentPage 添加 calssName active：

<Link
  className={`page-link ${currentPage === number ? "active" : ""}`}
>

【讨论】：