ReactJS如何动态添加切换类名实现图标点击变色效果

直接通过React状态控制动态类名即可实现需求，修改代码如下：

修改后的App.jsx代码 #

import "./App.css";
import { useState } from "react";
import { BsCloudRain } from "react-icons/bs";
import { GiForest } from "react-icons/gi";

function App() {
  // 存储两个图标各自的激活状态，默认均为未激活
  const [rainActive, setRainActive] = useState(false);
  const [forestActive, setForestActive] = useState(false);

  return (
      <div id="container">
        <div id="icons">
          <BsCloudRain
            className={`rain ${rainActive ? "active-rain" : ""}`}
            onClick={() => setRainActive(prev => !prev)}
          />
          <GiForest
            className={`forest ${forestActive ? "active-forest" : ""}`}
            onClick={() => setForestActive(prev => !prev)}
          />
        </div>
      </div>
  );
}

export default App;

配套CSS样式参考（写在App.css里） #

#icons {
  display: flex;
  gap: 2rem;
  font-size: 3rem;
  cursor: pointer;
}
/* 图标默认统一样式 */
.rain, .forest {
  color: #8c8c8c;
  transition: color 0.2s linear;
}
/* 激活状态专属样式 */
.active-rain {
  color: #1677ff;
}
.active-forest {
  color: #52c41a;
}

• 核心逻辑说明：
  • 用布尔类型的state分别记录两个图标的激活状态，点击时通过状态取反实现「激活/取消激活」的切换
  • 类名通过模板字符串动态拼接，激活时自动追加对应的高亮类，CSS中给高亮类配置单独的显示颜色即可
  • 代码里加了简单的颜色过渡效果，不需要直接删掉transition属性就行

补充：如果需要两个图标互斥（同一时间只能激活一个），可以把两个独立state替换为单个存储当前激活项的state：const [activeIcon, setActiveIcon] = useState("")，点击时判断当前激活项是否为自身，是则清空值，否则设置为自身标识，再根据activeIcon的值动态拼接类名即可。

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