Javascript 当paginate项在ReactJS中处于活动状态时，如何更改颜色？

我正在呈现一个元素列表并进行分页，列表的每一页包含3个元素

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

你能告诉我怎么做吗

这是我输入的代码

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

---

提前谢谢。

在map函数中，您可以在page==currentPage的条件下设置活动类名

{pageNumbers.map（（页面）=>(
handleClick（第页）}
className={page==currentPage？classes.activePageNumber:classes.pageNumber}
>
{page}
))}

在页面上映射时，可以添加每个迭代的索引，然后检查索引是否等于当前页面，而不是为其指定默认类。像这样：

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

---

您可以在

map

函数中动态添加类，以便当前页面接收额外的类：

卡片组件的返回方式：

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>
  );

看看这个在行动

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>
  );

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"
  }
});