javascript - 如何在不使用 useState 的情况下更改 React 中悬停时的类，以便并非所有元素都被触发

Question

我想在元素(跨度)悬停时在 React 中应用悬停效果，但是当我对多个元素执行此操作并悬停其中一个元素时，所有这些都会被触发。我想要执行多个这些 span 元素，但是当我将鼠标悬停在其中一个元素时，所有这些元素都会发生变化。

import React, { useState } from "react";
import { Link } from "react-router-dom";
import { Animated } from "react-animated-css";

// styles
import styles from "./Intro.module.css";

function Intro() {
  const [hovered, setHovered] = useState(false);
  const toggleHover = () => setHovered(!hovered);
  const toggleHover2 = () =>
    setTimeout(() => {
      setHovered(!hovered);
    }, 700);

  return (
    <section className={styles.container}>
      <div className={styles.inner}>
        <span className={styles.hello}>hello,</span>
        <h1 className={styles.title}>
          My name is

          <!-- This bit -->

          <span
            className={hovered ? "animated rubberBand" : ""}
            onMouseEnter={toggleHover}
            onMouseLeave={toggleHover2}
          >
            D
          </span>

        <!-- This bit -->
          mytro Bula
        </h1>
        <h1 className={styles.title}>
          I turn <span className={styles.titleCoffee}>coffee</span> into code
        </h1>
        <p className={styles.para}>
          I'm a <span className={styles.paraRed}>front-end web developer</span>
          <span className={styles.paraBlue}>/designer</span> from Ukraine based
          in London, I love creating beatiful and functional{" "}
          <span className={styles.paraRed}>websites</span>,{" "}
          <span className={styles.paraRed}>applications</span>, and everything
          in between.
        </p>
        <Link to="/Contact" className={styles.btn}>
          Get in touch
        </Link>
      </div>
    </section>
  );
}

export default Intro;

Answer 1

我建议使用CSS的:悬停伪级以更改悬停时的元素样式 - 它的性能更大，不太可能引起您看到的错误。

但是，如果您想继续进行react中的操作，则应将 span 划分为新组件，然后将所有鼠标悬停相关状态移动到该组件中。 目前，您拥有一个“盘旋”状态，所有元素共享，这就是为什么当其中一个徘徊时，您都会看到它们都会改变。 通过将 setState 放在单独的组件中，然后在此 Into 组件中重复使用该组件，每个组件都会有其自己的版本的 hover hover 。 :)