reactjs 当我点击React时,我如何添加CSS类?

suzh9iv8  于 2022-12-18  发布在  React
关注(0)|答案(1)|浏览(137)

我的开发环境:一米零一米,一米零一米,一米二米,一米三米。
当我单击分类为选项卡的每个字段的技术堆栈时,我希望仅在单击CSS并将其包含在所选标记中时才更改CSS。

const [selectedTags, setSelectedTags] = useRecoilState(selectedTagsState);

  const tabContArr = [
    {
      tabTitle: 'FE',
      tabCont: ['JavaScript', 'TypeScript', 'React', 'Vue', 'Svelte', 'Nextjs'],
    },
    {
      tabTitle: 'BE',
      tabCont: [
        'Java',
        'Spring',
        'Nodejs',
        'Nextjs',
        'Go',
        'Kotlin',
        'Express',
        'MySQL',
        'MongoDB',
        'Python',
        'Django',
        'php',
        'GraphQL',
        'Firebase',
      ],
    },
    {
      tabTitle: 'etc',
      tabCont: [],
    },
    
  ];

  const onTagClick = (e) => {
    const newSelectedTags = [...selectedTags];

    const filterTarget = newSelectedTags.filter(
      (el) => el.tagName === e.target.textContent,
    );

    if (filterTarget.length === 0 && newSelectedTags.length < 5) {
      let tagObj = {};
      tagObj.tagName = e.target.textContent;
      newSelectedTags.push(tagObj);
      setSelectedTags(newSelectedTags);
    } else if (
      filterTarget.length !== 0 ||
      selectedTags.length >= 5
    ) {
      {
        (''); // nothing change
      }
    }
  };

          // FE, BE Choose
          tabContArr[activeIdx].tabCont.map((skillTag, idx) => {
            return (
              <div
                key={idx}
                className={
                  // HERE!!!
                  selectedTags.includes(skillTag)
                    ? 'skill-tag skill-selected-tag'
                    : 'skill-tag'
                }
                onClick={onTagClick}
                aria-hidden="true"
              >
                {skillTag}
              </div>
            );
          })

我试着写代码像一个标记为“这里!!!”,但它不工作,当我这样做。请帮助我如何改变CSS(类)只为名称在选定的标签!!

className={
  // HERE!!!
  selectedTags.includes(skillTag)
    ? 'skill-tag skill-selected-tag'
    : 'skill-tag'
  }
3htmauhk

3htmauhk1#

tabContArr[activeIdx].tabCont.map((skillTag, idx) => {中,skillTag是一个字符串,而selectedTags是一个对象数组,如下所示:[{tagName: 'Java'}, {tagName: 'Spring'}, ...]。您正在确定对象数组是否包含字符串,而字符串永远不会出现。console.log(selectedTags, skillTag)将使它更容易理解。

相关问题