当分页项在 ReactJS 中处于活动状态时如何更改颜色？

Question

我正在渲染一个元素列表并进行分页，我的列表的每个页面都包含 3 个元素。

分页工作正常。 但我不知道如何更改活动分页项的颜色，以便用户知道它在哪个页面上。

你能告诉我怎么做吗？

这是我放入codeandbox的代码

例如，在上面的照片中，活动页面是 2。但没有迹象表明这一点。

先感谢您。

Answer 1

您可以在map函数上动态添加类，以便当前页面接收一个附加类：

Card组件的返回方法：

return (
    <div>
      {currentPerfumes.map((item) => (
        <CardItem key={item.id} item={item} />
      ))}
      <div className={classes.page}>
        <div className={classes.pageContent}>
          {pageNumbers.map((page, index) => {
            const spanClasses = [classes.pageNumber]; // list of classes
            if (index === currentPage - 1) // if we are on current page
              spanClasses.push(classes.activePage); // add an additional class
            return (
              <span
                key={page}
                id={page}
                onClick={() => handleClick(page)}
                className={spanClasses.join(" ")}
              >
                {page}
              </span>
            );
          })}
        </div>
      </div>
    </div>
  );

style.js 有一个新的样式， activePage ：

import { makeStyles } from "@material-ui/core";

export const useStyles = makeStyles({
  page: {
    display: "flex",
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center"
  },
  pageContent: {
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    width: "20%"
  },
  pageNumber: {
    cursor: "pointer",
    backgroundColor: "#ff8f32",
    color: "#fff",
    fontSize: "24px",
    width: "20px",
    textAlign: "center"
  },
  activePage: {
    backgroundColor: "blue"
  }
});

在此处查看此操作。

Answer 2

在您的地图功能中，您可以在 page === currentPage 的条件下设置一个活动的 className

          {pageNumbers.map((page) => (
            <span
              key={page}
              id={page}
              onClick={() => handleClick(page)}
              className={page === currentPage ? classes.activePageNumber : classes.pageNumber}
            >
              {page}
            </span>
          ))}

Answer 3

当你映射你的页面时，你可以添加每次迭代的索引，然后你可以检查索引是否等于当前页面，而不是给它默认类。 像这样：

{pageNumbers.map((page, id) => (
            <span
              key={page}
              id={page}
              onClick={() => handleClick(page)}
              className={
                currentPage === id ? classes.selectedPage : classes.pageNumber
              }
            >
              {page}
            </span>
          ))
}

然后将新类selectedPage添加到 css 中：

例如：

selectedPage: {
    cursor: "pointer",
    backgroundColor: "#000000",
    color: "#fff",
    fontSize: "24px",
    width: "20px",
    textAlign: "center"
  }