React筛选项目时如何为筛选按钮添加激活类并切换样式

你当前给<a>标签添加的active属性并非标准HTML属性，React不会自动将其转换为类名。要实现点击后按钮保持特定颜色的效果，核心思路是根据当前filter状态动态为按钮添加/移除CSS类，具体步骤如下：

1. 动态设置按钮的className属性 #

将每个筛选按钮的active替换为条件判断的className，当按钮对应的筛选值与当前filter状态匹配时，添加自定义的激活类（比如active）：

<div className="portfolio__labels">
  <a 
    className={filter === "all" ? "active" : ""} 
    onClick={() => setFilter("all")}
  >
    All
  </a>
  <a
    className={filter === "frontend" ? "active" : ""}
    onClick={() => setFilter("frontend")}
  >
    Frontend Development
  </a>
  <a
    className={filter === "3d" ? "active" : ""}
    onClick={() => setFilter("3d")}
  >
    3D Modeling
  </a>
  <a
    className={filter === "branding" ? "active" : ""}
    onClick={() => setFilter("branding")}
  >
    Branding
  </a>
</div>

如果按钮已有基础类名，可使用模板字符串组合：

className={`portfolio__label ${filter === "all" ? "active" : ""}`}

2. 添加激活状态的CSS样式 #

在你的样式文件中，为.active类定义激活状态的颜色及其他样式：

.portfolio__labels a.active {
  color: #ff4081; /* 替换成你想要的颜色 */
  font-weight: bold; /* 可选：添加加粗等额外样式 */
}

可选优化：简化筛选逻辑 #

当前你通过map为每个项目添加filtered属性再判断显示，其实可以直接用filter方法简化代码，还能省去projects状态变量：

function Projects() {
  const [filter, setFilter] = useState("all");

  // 直接计算筛选后的项目
  const filteredProjects = portfolio.filter(project => {
    if (filter === "all") return true;
    return project.category.includes(filter);
  });

  return (
    <>
      <div className="portfolio">
        {/* 筛选按钮部分同上 */}
        <div className="portfolio__container">
          <ul>
            {filteredProjects.map(item => (
              <li key={item.name} className='card'>
                <Link className='card_path' to={item.source}>
                  <h1>{item.title}</h1>
                  <p>{item.description}</p>
                  <div className="card_preview">
                    <img src={item.preview} />
                    <img src={item.overlay} />
                  </div>
                  <span>{item.tools}</span>
                </Link>
              </li>
            ))} 
          </ul>
        </div>    
      </div>
    </>
  );
}

内容的提问来源于stack exchange，提问作者pcmila