本文介绍在 react typescript 项目中，通过 usestate 配合 onmouseenter 和 onmouseleave 事件，动态切换本地静态图片的完整实现方案，并提供可直接复用的代码示例与关键注意事项。
本文介绍在 react typescript 项目中，通过 usestate 配合 onmouseenter 和 onmouseleave 事件，动态切换本地静态图片的完整实现方案，并提供可直接复用的代码示例与关键注意事项。
在 React（TSX）中实现图片悬停切换，核心在于响应鼠标交互、动态更新 的 src 属性。由于图片资源是本地导入的模块（如 import mapSquare from './Pictures/mapSquare.png'），它们在编译时被 Webpack/Vite 处理为有效的 URL 字符串，因此可直接用于状态管理。
以下是一个简洁、健壮的实现方式：
import { useState } from 'react';
import mapSquare from './Pictures/mapSquare.png';
import mapSquareHover from './Pictures/mapSquareTwo.png'; // 注意：确保文件名拼写正确（原文中为 mapSqaureTwo，需修正为实际文件名）
function App() {
const [currentSrc, setCurrentSrc] = useState(mapSquare);
return (
<div className="maindiv">
<div>
<img
className="ApplicationSquareImg"
src={currentSrc}
alt="Interactive map square"
onMouseEnter={() => setCurrentSrc(mapSquareHover)}
onMouseLeave={() => setCurrentSrc(mapSquare)}
/>
</div>
</div>
);
}
export default App;✅ 关键说明：
- 使用 useState 管理当前显示的图片路径（初始为默认图）；
- onMouseEnter 触发时切换为悬停图，onMouseLeave 恢复为原始图；
- 两张图片均通过 ES 模块 import 导入，确保路径正确且支持热更新；
- 无需额外 CSS（如 :hover + background-image），纯 JS 控制更灵活，尤其适合需要逻辑判断或异步加载的场景。
⚠️ 注意事项：
- 文件路径必须准确，建议启用 IDE 的路径自动补全（如 VS Code + TypeScript 插件）；
- 图片变量命名应语义化（如 mapSquareDefault / mapSquareHover），避免混淆；
- 若需支持键盘焦点（如无障碍访问），建议补充 onFocus / onBlur 事件，或改用 CSS :hover + :focus 组合方案；
- 对于大量图片切换或性能敏感场景，可考虑预加载悬停图（例如在 useEffect 中创建 Image 实例调用 .src 触发缓存）。
该方案轻量、可维护性强，是 TSX 环境下处理静态图片交互的标准实践之一。
