React实现默认给首个按钮添加active类并点击切换

你可以通过useState跟踪当前激活按钮的索引，实现类名的动态切换，以下是修改后的完整代码：

import { useState } from "react";
import buttons from "../data/buttons.json";

const Home = () => {
  // 用state存储当前激活按钮的索引，默认第一个按钮（索引0）激活
  const [activeIndex, setActiveIndex] = useState(0);

  return (
    <div>
      {buttons.map((item, index) => {
        // 根据当前索引是否等于激活索引，动态拼接类名
        const buttonClass = `btn ${index === activeIndex ? "btn-active" : ""}`;
        return (
          <button
            key={index}
            className={buttonClass}
            // 点击时更新激活索引为当前按钮的索引
            onClick={() => setActiveIndex(index)}
          >
            {item.value}
          </button>
        );
      })}
    </div>
  );
};

export default Home;

关键步骤说明： #

• 状态管理：通过useState(0)初始化激活索引为0，对应数组中的第一个按钮，实现默认激活效果。
• 动态类名：使用模板字符串拼接类名，当当前按钮的索引等于activeIndex时，添加btn-active类。
• 点击切换：给每个按钮绑定onClick事件，点击时将activeIndex更新为当前按钮的索引，触发组件重新渲染，完成激活状态的切换。

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