React垂直标签页实现：点击动态生成标签添加激活类并移除其他标签激活状态

你现在的实现直接操作DOM修改className，没法同步移除其他标签的激活类，React的核心思想是用状态驱动UI，所以我们可以通过维护一个“当前激活标签索引”的状态来解决这个问题，具体步骤如下：

1. 引入并初始化状态 #

首先在你的组件里添加useState钩子，用来跟踪当前激活的标签索引，默认值设为0（对应第一个标签默认激活）：

import { useState } from 'react';

// 在组件函数内部
const [activeIndex, setActiveIndex] = useState(0);

2. 修改点击事件处理函数 #

不再直接操作DOM，而是通过更新状态来切换激活的标签：

function handleTab(index){ 
  // 把当前点击的标签索引设置为激活状态
  setActiveIndex(index);
}

3. 基于状态渲染标签的类名 #

在渲染标签列表时，根据activeIndex来判断每个标签是否应该添加LabelActive类：

const domain_str = domains.map((elem, index) => (
  <label 
    onClick={() => handleTab(index)} 
    className={index === activeIndex ? "LabelActive" : ""}
    key={index} // 必须添加key，React列表渲染需要唯一标识元素
  >
    {elem.domain} 
    <img src="images/tab-arrow-right-icon.svg" alt="Tab arrow icon"/>
  </label>
));

为什么这样可行？ #

当你点击某个标签时，setActiveIndex会更新状态，React会自动重新渲染整个标签列表：

• 当前点击的标签索引和activeIndex匹配，会加上LabelActive类
• 其他标签的索引和activeIndex不匹配，类名会被清空，自动移除激活状态

这种方式完全符合React的设计模式，避免了手动操作DOM带来的潜在问题，代码也更易维护。

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