Javascript 在react中的特定列表项中添加/删除类

我有一个react网页，它呈现了本地数据库中数组的链接列表。我想在将鼠标悬停在每个链接（列表项）上时显示链接提示

当前，当我将鼠标悬停在列表项（我网页上的链接）上时，会显示来自其他链接的所有链接提示。我只想要我悬停在上面的那一个来显示提示。我怎样才能达到这个效果

--

行动中的问题：

function Works() {
  const [hoverHint, setHoverHint] = useState(false);

  function showHoverHint() {
    setHoverHint(true);
  }
  function hideHoverHint() {
    setHoverHint(false);
  }

  const linkMaps = {
    website: <Globe fill="#aaa" size={20} />,
    github: <GitHub fill="#aaa" size={20} />,
    gitlab: <GitLab fill="#aaa" size={20} />,
    apk: <Android fill="#aaa" size={20} />,
    youtube: <YouTube fill="#aaa" size={20} />
  };

  return(
    <ul className="work-links">
      {work.links.map(link => (
        <li>
          <span
            className={
              hoverHint ? 'before show-hint' : 'before hide-hint'
            }
          >
            {link.text}
          </span>
          <a
            href={link.url}
            target="_blank"
            rel="noopener noreferrer"
            onMouseOver={showHoverHint}
            onMouseOut={hideHoverHint}
          >
            {linkMaps[link.type]}
          </a>
          <span
            className={
              hoverHint ? 'after show-hint' : 'after hide-hint'
            }
          >
            {link.text}
          </span>
        </li>
      ))}
    </ul>
  );
}

.work-links {
  list-style-type: none;
  padding: 0;
  margin-top: 0.3em;
  margin-bottom: 0;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.work-links svg {
  transition: 0.15s;
}

.work-links a {
  display: inline-block;
  padding: 0.4em 0.4em 0;
  margin-bottom: 0.8em;
  background-color: #eee;
  border-radius: 50%;
  transition: 0.15s;
  z-index: 1;
}

.work-links a:hover {
  background-color: #333;
}

.work-links a:hover svg {
  fill: #eee;
}

.work-card-container:nth-child(odd) .work-links {
  right: -11em;
  align-items: flex-start;
}
.work-card-container:nth-child(even) .work-links {
  left: -11em;
  align-items: flex-end;
}

.work-card-container:nth-child(odd) .before {
  display: none;
}
.work-card-container:nth-child(even) .before {
  right: 0.5em;
  transition: 0.1s;
}
.work-card-container:nth-child(even) .after {
  display: none;
}
.work-card-container:nth-child(odd) .after {
  left: 0.5em;
  transition: 0.2s;
}

.hide-hint {
  opacity: 0;
}
.work-card-container:nth-child(even) .hide-hint {
  transform: translateX(50%);
}
.work-card-container:nth-child(odd) .hide-hint {
  transform: translateX(-50%);
}

.show-hint {
  transform: translateX(0);
  opacity: 1;
}

.work-links > li {
  display: flex;
  align-items: center;
}

.work-links span {
  position: relative;
  top: -0.5em;
  color: #888;
}

--

反应代码：

function Works() {
  const [hoverHint, setHoverHint] = useState(false);

  function showHoverHint() {
    setHoverHint(true);
  }
  function hideHoverHint() {
    setHoverHint(false);
  }

  const linkMaps = {
    website: <Globe fill="#aaa" size={20} />,
    github: <GitHub fill="#aaa" size={20} />,
    gitlab: <GitLab fill="#aaa" size={20} />,
    apk: <Android fill="#aaa" size={20} />,
    youtube: <YouTube fill="#aaa" size={20} />
  };

  return(
    <ul className="work-links">
      {work.links.map(link => (
        <li>
          <span
            className={
              hoverHint ? 'before show-hint' : 'before hide-hint'
            }
          >
            {link.text}
          </span>
          <a
            href={link.url}
            target="_blank"
            rel="noopener noreferrer"
            onMouseOver={showHoverHint}
            onMouseOut={hideHoverHint}
          >
            {linkMaps[link.type]}
          </a>
          <span
            className={
              hoverHint ? 'after show-hint' : 'after hide-hint'
            }
          >
            {link.text}
          </span>
        </li>
      ))}
    </ul>
  );
}

.work-links {
  list-style-type: none;
  padding: 0;
  margin-top: 0.3em;
  margin-bottom: 0;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.work-links svg {
  transition: 0.15s;
}

.work-links a {
  display: inline-block;
  padding: 0.4em 0.4em 0;
  margin-bottom: 0.8em;
  background-color: #eee;
  border-radius: 50%;
  transition: 0.15s;
  z-index: 1;
}

.work-links a:hover {
  background-color: #333;
}

.work-links a:hover svg {
  fill: #eee;
}

.work-card-container:nth-child(odd) .work-links {
  right: -11em;
  align-items: flex-start;
}
.work-card-container:nth-child(even) .work-links {
  left: -11em;
  align-items: flex-end;
}

.work-card-container:nth-child(odd) .before {
  display: none;
}
.work-card-container:nth-child(even) .before {
  right: 0.5em;
  transition: 0.1s;
}
.work-card-container:nth-child(even) .after {
  display: none;
}
.work-card-container:nth-child(odd) .after {
  left: 0.5em;
  transition: 0.2s;
}

.hide-hint {
  opacity: 0;
}
.work-card-container:nth-child(even) .hide-hint {
  transform: translateX(50%);
}
.work-card-container:nth-child(odd) .hide-hint {
  transform: translateX(-50%);
}

.show-hint {
  transform: translateX(0);
  opacity: 1;
}

.work-links > li {
  display: flex;
  align-items: center;
}

.work-links span {
  position: relative;
  top: -0.5em;
  color: #888;
}

---

您需要基于唯一标识符而不是共享状态值触发悬停状态

我想到了一种方法：

const [selectedLink, setSelectedLink] = React.useState(null)

<ul className="work-links">
  {work.links.map(link => (
    <li>
      <span
        className={
          hoverHint ? 'before show-hint' : 'before hide-hint'
        }
      >
        {link.text}
      </span>
      <a
        href={link.url}
        target="_blank"
        rel="noopener noreferrer"
        // Use the URL as a unique identifier
        onMouseOver={() => setSelectedLink(link.url)}
        // Set to null on mouseout
        onMouseOut={() => setSelectedLink(null)}
      >
        {linkMaps[link.type]}
      </a>
      <span
        className={
          selectedLink === link.url ? 'after show-hint' : 'after hide-hint'
        }
      >
        {link.text}
      </span>
    </li>
  ))}
</ul>

const[selectedLink，setSelectedLink]=React.useState（null）

{work.links.map（link=>(

{link.text}
{link.text}

))}

感谢您的快速回复。我更新了我的问题，并在react函数的“return”之前添加了语句以供参考。至于你的答案，我应该如何使用'selectedLink'状态中的'link.url'来添加/删除'show hint'或'hide hint'类？哎呀！更新了我的答案，哈哈。是的，您想将

selectedLink

与迭代的

link.url

属性进行比较以触发类。