React点击标签切换CSS类失效求助（Recoil+Styled-Component）

开发环境：react、recoil、javascript、styled-component

需求是点击分类标签栏的技术栈标签，当标签被加入selectedTags时切换其CSS类，但当前标记为"HERE!!!"处的判断逻辑不生效。

问题原因 #

你的selectedTags数组中存储的是对象（比如{tagName: 'JavaScript'}），但skillTag是字符串类型（比如'JavaScript'），直接用selectedTags.includes(skillTag)判断时，因类型与内容不匹配，永远返回false，导致选中状态的CSS类无法生效。

解决方案 #

1. 修正CSS类判断逻辑 #

将includes替换为some方法，检查selectedTags中是否存在tagName与当前skillTag匹配的对象：

className={
  selectedTags.some(tag => tag.tagName === skillTag)
    ? 'skill-tag skill-selected-tag'
    : 'skill-tag'
}

2. 可选：优化点击事件，支持取消选中 #

原代码仅支持添加标签，若需要点击已选中标签时取消选中，可修改onTagClick函数：

const onTagClick = (e) => {
  const tagName = e.target.textContent;
  setSelectedTags(prev => {
    const isSelected = prev.some(tag => tag.tagName === tagName);
    if (isSelected) {
      // 已选中则移除该标签
      return prev.filter(tag => tag.tagName !== tagName);
    } else {
      // 未选中且数量未达上限则添加
      if (prev.length < 5) {
        return [...prev, { tagName }];
      }
      // 数量达上限则不做修改
      return prev;
    }
  });
};

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