React JS中仅为Hover目标元素切换类的实现问题咨询

嗨，这个问题我之前也碰到过！React和jQuery的思路确实不一样——jQuery是直接抓DOM改样式，而React得靠状态驱动来实现这种交互。别担心，有两种简单的方案能解决你的问题，我给你详细说说～

方案一：让子组件自己维护hover状态（最简单直接） #

这种方案最适合每个子元素独立控制的场景，每个子组件自己管自己的hover状态，完全不需要父组件操心。

比如我们先写一个Card子组件：

import { useState } from 'react';

const Card = ({ imageSrc, description }) => {
  // 用useState存储当前组件的hover状态，初始为false（未hover）
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div
      // 根据isHovered动态拼接className，hover时加上display类
      className={`card-container ${isHovered ? 'display' : ''}`}
      // 鼠标进入时把状态改成true
      onMouseEnter={() => setIsHovered(true)}
      // 鼠标离开时把状态改回false
      onMouseLeave={() => setIsHovered(false)}
    >
      <img src={imageSrc} alt="Card preview" />
      {/* 描述也根据状态控制显示/隐藏 */}
      <p className={`description ${isHovered ? 'display' : ''}`}>{description}</p>
    </div>
  );
};

然后父组件里直接循环渲染多个Card就好：

const ParentComponent = () => {
  // 假设你的数据源是这样的
  const cardList = [
    { id: 1, img: 'your-img-url-1.jpg', desc: '第一张卡片的描述' },
    { id: 2, img: 'your-img-url-2.jpg', desc: '第二张卡片的描述' },
    // 更多卡片数据...
  ];

  return (
    <div className="card-wrapper">
      {cardList.map(card => (
        <Card
          key={card.id}
          imageSrc={card.img}
          description={card.desc}
        />
      ))}
    </div>
  );
};

每个Card组件都有自己独立的isHovered状态，鼠标hover哪个，哪个的状态就会更新，自然只会给当前元素加上display类，完全不会影响其他子组件～

方案二：父组件统一管理hover状态（适合全局联动场景） #

如果你的业务需要父组件知道哪个子元素被hover了（比如要做一些全局联动逻辑），可以让父组件维护一个hoveredItemId状态，子组件通过props接收状态和回调：

// 父组件
const ParentComponent = () => {
  const [hoveredItemId, setHoveredItemId] = useState(null);
  const cardList = [/* 同上的卡片数据 */];

  return (
    <div className="card-wrapper">
      {cardList.map(card => (
        <Card
          key={card.id}
          cardData={card}
          // 告诉子组件：你是不是当前被hover的那个？
          isHovered={hoveredItemId === card.id}
          // 子组件hover时通知父组件更新状态
          onHoverEnter={() => setHoveredItemId(card.id)}
          // 子组件离开hover时通知父组件清空状态
          onHoverLeave={() => setHoveredItemId(null)}
        />
      ))}
    </div>
  );
};

// 子组件
const Card = ({ cardData, isHovered, onHoverEnter, onHoverLeave }) => {
  return (
    <div
      className={`card-container ${isHovered ? 'display' : ''}`}
      onMouseEnter={onHoverEnter}
      onMouseLeave={onHoverLeave}
    >
      <img src={cardData.img} alt="Card preview" />
      <p className={`description ${isHovered ? 'display' : ''}`}>{cardData.desc}</p>
    </div>
  );
};

这种方案里，父组件掌控所有子组件的hover状态，子组件只负责根据父组件传的isHovered来渲染样式，适合需要更复杂交互逻辑的场景。

为什么不能用jQuery的方式？ #

React是数据驱动视图的，直接用$(this).addClass()修改真实DOM的话，React的虚拟DOM和真实DOM会出现不一致——下次组件重新渲染时，React会把你手动加的类给覆盖掉，导致样式混乱。所以一定要通过状态来控制样式，这才是React的正确打开方式～

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