React中满足x.feature条件时清除元素其他类名的实现问题

你可以通过优先级判断实现需求——当x.feature为真时，按钮只保留possible-links-cont-star-btn类；否则再拼接原本的其他类。不用拆分组件做条件渲染，直接在className里处理逻辑即可：

<Link
  key={i}
  onClick={() => setSelectedEvent(x)}
  className="possible-links-cont-link"
>
  <button
    className={x.feature 
      ? "possible-links-cont-star-btn" 
      : `${(i === 0 || i === izmirEventItemData.length - 1) ? "possible-links-cont-empty-btn" : "possible-links-cont-btn"} ${isHovered ? "active" : ""}`
    }
    onMouseOver={() => {
      setHoveredText(x);
      setIsHovered(true);
    }}
    onMouseLeave={() => setIsHovered(false)}
  ></button>
</Link>

逻辑说明 #

• 当x.feature满足时，直接赋值目标类名，完全忽略其他类的判断
• 不满足x.feature时，才会按原有逻辑拼接位置类和hover激活类

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