Question

基本上我有3张卡片需要悬停效果，我考虑过用useState来做，但是由于有3张卡片，我不能对3张卡片使用相同的状态在这种情况下，我将必须为每个卡创建3个状态，以将悬停效果应用于div和h1

如果我的h1悬停了，我会在bg和我的h1上分别使用css和

代码：

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个状态之外，还有其他更好的选择

（因为如果只剩下一张），当一张鼠标悬停时，效果将作用于所有卡，而不仅仅是这张卡。

Answer 1

为什么不在 Styled.CardCarousel 中移动useState逻辑？而且，如果您不是 Styled.CardCarousel 的所有者，只需在将其包装以包含状态的组件上创建。

Answer 2

您可以做的是，您可以将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>
      ...
  );

反应挂钩悬停状态

2 个答案: