React组件中添加class时如何移除其他所有元素的同类class？

嘿，我来帮你搞定这个问题！你现在遇到的问题是直接操作DOM来添加active类，这种方式没法同步更新其他元素的状态——React是数据驱动视图的，咱们应该把活跃项的状态存在组件的state里，让render函数根据状态自动处理所有导航项的类名，而不是手动修改DOM。

具体修改步骤： #

1. 移除直接操作DOM的代码：删掉event.target.className = "active";这行，因为React不推荐直接修改真实DOM，这会导致状态和视图不一致。
2. 通过状态控制类名：在渲染导航项的时候，根据state.activeGroup的值，给匹配的项加上active类，其他项自动不带这个类。
3. 优化点击事件的参数传递：最好直接把分组ID作为参数传给activateGroup，而不是依赖event.target.id（避免元素嵌套时target不准确的问题）。

修改后的完整组件代码： #

class NavTree extends React.Component { 
  // 这是用于展开各分组进行编辑的左侧导航树
  constructor(props) { 
    super(props); 
    this.state = { 
      activeGroup: null // 用该值高亮树中的导航项
    }; 
    this.activateGroup = this.activateGroup.bind(this); 
  } 

  // 直接接收分组ID作为参数，更可靠
  activateGroup(groupId) { 
    this.setState({ activeGroup: groupId }); 
    this.props.onNavChange(groupId); 
  } 

  render() { 
    // 假设你的导航分组数据来自props.groups，这里替换成你实际的数据源
    const { groups } = this.props;

    return (
      <ul className="nav-tree">
        {groups.map(group => (
          <li
            key={group.id}
            // 根据状态动态设置类名：匹配activeGroup时添加active类
            className={`nav-item ${this.state.activeGroup === group.id ? 'active' : ''}`}
            // 点击时直接传入当前分组的ID
            onClick={() => this.activateGroup(group.id)}
          >
            {group.name}
          </li>
        ))}
      </ul>
    );
  } 
}

为什么这样更靠谱？ #

• 完全遵循React的数据流：状态变化驱动视图更新，所有导航项的类名都是由activeGroup状态决定的，点击新项时，状态更新后render会自动给旧项移除active类，给新项加上，全程无需手动操作DOM。
• 避免DOM操作的坑：比如如果导航项内部有子元素（比如图标、span），event.target可能不是你期望的那个元素，直接传groupId就不会有这个问题。
• 状态统一管理：所有活跃状态都存在state里，方便后续扩展（比如初始化时设置默认活跃项，或者从props同步初始状态）。

如果你的导航项结构和示例不同，只需要把className的判断逻辑套用到你实际的导航元素上就行，核心思路就是用状态控制类名，而不是手动修改DOM。

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