React组件：悬停父容器时切换子img元素的src属性

不用直接操作DOM，用React状态驱动就能搞定，还能保证组件复用性，直接看方案：

核心思路 #

• 用useState管理当前显示的图片地址，默认加载传入的默认图
• 在整个卡片容器上绑定onMouseEnter和onMouseLeave事件，触发图片切换
• 组件通过Props接收标题、默认图、悬停图等参数，完全复用

完整TSX代码示例 #

import { useState } from 'react';

// 定义组件Props类型，保证类型安全
type ExternalProfileProps = {
  title: string;
  defaultImg: string;
  hoverImg: string;
  // 可按需扩展其他Props，比如图片alt文本、卡片样式类名等
  imgAlt?: string;
};

export const ExternalProfile = ({ title, defaultImg, hoverImg, imgAlt = 'Profile image' }: ExternalProfileProps) => {
  // 用状态控制当前显示的图片
  const [currentImg, setCurrentImg] = useState<string>(defaultImg);

  // 鼠标进入卡片时切换到悬停图
  const handleMouseEnter = () => {
    setCurrentImg(hoverImg);
  };

  // 鼠标离开卡片时切回默认图
  const handleMouseLeave = () => {
    setCurrentImg(defaultImg);
  };

  return (
    {/* 整个卡片容器绑定鼠标事件 */}
    <div 
      className="external-profile-card"
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      style={{ cursor: 'pointer', padding: '12px', border: '1px solid #eee', borderRadius: '8px' }}
    >
      <img src={currentImg} alt={imgAlt} style={{ width: '100%', height: 'auto', borderRadius: '4px' }} />
      <h3 style={{ marginTop: '8px', marginBottom: '0' }}>{title}</h3>
    </div>
  );
};

为什么之前的方法会报错？ #

你之前用useEffect获取DOM元素再操作，大概率是imageVar的作用域问题——要么没正确用useRef声明变量，要么在事件回调里访问不到这个变量。而用状态驱动的方式完全绕开了DOM操作，符合React的数据流逻辑，也不会有这类作用域错误。

使用示例 #

<ExternalProfile
  title="Brian Grieco"
  defaultImg="/path/to/default-image.png"
  hoverImg="/path/to/hover-image.png"
/>

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