React实现点击添加className并移除兄弟元素同类名的方法求助

嘿，刚接触React不用慌，这个需求用React的状态管理就能轻松搞定，我给你一步步拆解清楚：

核心思路 #

咱们需要用React的useState钩子维护当前激活菜单项的索引，点击菜单项时更新这个索引，再根据索引判断哪个项需要加上active类，其他兄弟项自动移除该类。

修改后的完整代码 #

import { useState } from 'react'; // 别忘了引入useState钩子

function Menu(props) { 
  const list = ['list1', 'list2', 'list3'];
  // 定义状态：activeIndex存当前激活项的索引，初始设为1让list2默认激活
  const [activeIndex, setActiveIndex] = useState(1);

  const menuitems = list.map((item, index) => { 
    return (
      <li 
        className={`menuitem ${index === activeIndex ? 'active' : ''}`}
        key={index}
        onClick={() => setActiveIndex(index)} // 点击时更新激活索引
      >
        {item}
      </li>
    );
  });

  return ( <ul>{menuitems}</ul> );
}

关键部分解释 #

• 引入useState：React函数组件需要用useState管理内部状态，这是实现动态UI变化的核心。
• 状态初始化：把activeIndex初始值设为1，这样页面加载时list2就默认带有active类，和你期望的DOM结构完全匹配。
• 动态类名拼接：用模板字符串判断当前项索引是否等于激活索引，匹配就加上active类，否则只保留基础的menuitem类。
• 点击事件处理：给每个li绑定点击事件，点击时把当前项的索引传给setActiveIndex，状态更新后组件会自动重新渲染，完成激活状态的切换。

这样就能实现你要的效果：点击任意菜单项，它会加上active类，同时其他兄弟项的active类会被自动移除~

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