當分頁項在 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"
  }