为映射元素添加'active'类导致全局生效，如何仅为点击项添加？

嘿，我懂你现在的困扰——你当前用了一个布尔类型的questionActive状态，所以不管点击哪个元素，所有映射出来的项都会根据这个全局状态切换active类，自然就会全部一起变啦。要实现点击单个元素仅自身激活，我们需要把状态改成存储当前激活元素的唯一标识（比如你的questions.id），而不是一个统一的布尔值。

具体修改步骤： #

1. 更新状态初始化：把原来的布尔值状态换成存储激活id的变量，初始设为null表示没有元素激活：

constructor(props) {
  super(props);
  this.state = {
    activeQuestionId: null // 用id来标记当前激活的元素
  };
  // 别忘了绑定事件处理函数，或者直接用箭头函数定义
  this.handleToggleActive = this.handleToggleActive.bind(this);
}

2. 修改点击事件处理函数：让它接收当前点击元素的id，然后判断是激活还是取消激活该元素：

handleToggleActive(questionId) {
  this.setState(prevState => ({
    activeQuestionId: prevState.activeQuestionId === questionId 
      ? null // 如果当前元素已经激活，就取消激活
      : questionId // 否则激活当前点击的元素
  }));
}

3. 更新映射中的类名判断：现在不再用全局布尔值，而是对比当前元素的id和状态里的activeQuestionId：

{tourDetails.map(({ node: questions })=> ( 
  <div key={questions.id} className="toggle"> 
    {/* 点击时传入当前问题的id，通过id匹配判断是否添加active类 */}
    <div onClick={() => this.handleToggleActive(questions.id)} 
         className={`toggle-title ${this.state.activeQuestionId === questions.id ? 'active' : ''}`}> 
      <h3><i></i><span className="title-name">{questions.question}</span></h3> 
    </div> 
    {/* 如果下方折叠内容需要根据激活状态显示/隐藏，也可以用同样的id判断逻辑 */}
  </div>
))}

为什么这样有效？ #

• 我们用每个元素唯一的id来跟踪当前激活的项，而不是一个全局开关，这样就能精准控制单个元素的状态。
• 点击事件里通过箭头函数把当前元素的id传给处理函数，确保我们明确知道是哪个元素被点击了。
• 类名判断时只给id匹配的元素添加active类，其他元素自然不会被影响。

如果你的需求是同时只能激活一个元素，上面的代码完全适用；如果需要支持多个元素同时激活，那可以把状态改成一个数组来存储多个激活的id，判断逻辑改成数组是否包含当前id即可。

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