React Hook при наведении

Question

в основном у меня есть 3 карты, которым понадобится эффект наведения, и я подумал сделать это с помощью useState, но, поскольку есть 3 карты, я не могу использовать одно и то же состояние для 3, в этом случае мне придется создать 3 состояния одно для каждой карты, чтобы применить мой эффект наведения на мой div и мой h1

, если мой h1 включен, я применяю css на моем bg и мой код h1 и

:

const DivCar = () => {
  const [isHover, setHover] = useState(false);
  console.log(isHover);
  return (
    <Carousel arrows slidesPerScroll={1} slidesPerPage={3} centered infinite>
      <Styled.CardCarousel background={TestBG} isHover={isHover}>
        <div
          className="Bg"
          onMouseEnter={() => setHover(true)}
          onMouseLeave={() => setHover(false)}
        ></div>
        <div className="headerH3">
          <h3
            onMouseOver={() => setHover(true)}
            onMouseOut={() => setHover(false)}
          >
            <a href="xd4">
              Rede de esgotos é desobstruída no Pontalzinho Pontalzinho.
            </a>
          </h3>
        </div>
      </Styled.CardCarousel>
      <Styled.CardCarousel background={TestBG2} isHover={isHover}>
        <div
          className="Bg"
          onMouseEnter={() => setHover(true)}
          onMouseLeave={() => setHover(false)}
        ></div>
        <div className="headerH3">
          <h3
            onMouseEnter={() => setHover(true)}
            onMouseLeave={() => setHover(false)}
          >
            <a href="xd4">.</a>
          </h3>
        </div>
      </Styled.CardCarousel>
      <Styled.CardCarousel background={TestBG} isHover={isHover}>
        <div
          className="Bg"
          onMouseEnter={() => setHover(true)}
          onMouseLeave={() => setHover(false)}
        ></div>
        <div className="headerH3">
          <h3
            onMouseEnter={() => setHover(true)}
            onMouseLeave={() => setHover(false)}
          >
            <a href="xd4">.</a>
          </h3>
        </div>
      </Styled.CardCarousel>
      <Styled.CardCarousel background={TestBG2} isHover={isHover}>
        <div
          className="Bg"
          onMouseEnter={() => setHover(true)}
          onMouseLeave={() => setHover(false)}
        ></div>
        <div className="headerH3">
          <h3
            onMouseEnter={() => setHover(true)}
            onMouseLeave={() => setHover(false)}
          >
            <a href="xd4">.</a>
          </h3>
        </div>
      </Styled.CardCarousel>
    </Carousel>
  );
};

Интересно, есть ли лучший вариант, кроме необходимости создавать 1 состояние для каждой карты

(потому что если оставить только одну), когда одна из них зависает, эффект будет go для всех карт и не только к этому.

Answer 1

Что вы можете сделать, так это то, что вы можете хранить json в одном состоянии и создать отдельную функцию, которая принимает имя карты для обновления, например;

const [hoveredCards, setHoveredCards] = useState(
  {
    card1: false,
    card2: false,
    card3: false,
  }
);


const updateHoveredCards = (cardName, value) => {
   let existingValues = JSON.parse(JSON.stringify(hoveredCards))
   existingValues[cardName] = value
   setHoveredCards(existingValues)
} 

return (
    <Carousel arrows slidesPerScroll={1} slidesPerPage={3} centered infinite>
      <Styled.CardCarousel background={TestBG} isHover={hoveredCards.card1}>
        <div
          className="Bg"
          onMouseEnter={() => updateHoveredCards("card1", true)}
          onMouseLeave={() => updateHoveredCards("card2", false)}
        ></div>
        <div className="headerH3">
          <h3
            onMouseOver={() => updateHoveredCards("card1", true)}
            onMouseOut={() => updateHoveredCards("card2", false)}
          >
            <a href="xd4">
              Rede de esgotos é desobstruída no Pontalzinho Pontalzinho.
            </a>
          </h3>
        </div>
      </Styled.CardCarousel>
      ...
  );

Answer 2

Почему бы вам не переместить useState logi c внутрь Styled.CardCarousel ? И если вы не являетесь владельцем Styled.CardCarousel , просто создайте компонент, обернув его, чтобы он содержал состояние.