React中onClick事件无法添加active-work类的问题求助

核心问题 #

你的代码里类名拼接时缺少空格，导致active-work和work__item被合并成一个无效的类名（比如active-workwork__item），CSS自然无法匹配到目标元素。

修复步骤 #

修改span标签的className拼接逻辑，在两个类之间添加空格：

// 原错误代码
className={`${active === index ? 'active-work' : ""}work__item`}

// 修改后正确代码
className={`work__item ${active === index ? 'active-work' : ''}`}

把work__item放在前面，后面跟上带空格的条件类，这样无论是否满足active条件，类名格式都是正确的。

额外排查点（可选） #

如果修复后仍不生效，可以检查以下几点：

• 确认work.css文件路径正确，且成功导入组件
• 提高CSS选择器优先级，避免被其他样式覆盖：

  .work__item.active-work {
      background-color: black;
      color: white;
  }
  

• 在handleClick函数里添加console.log(active)，确认点击后active状态是否正确更新为对应索引

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