react 放大镜效果

React 放大镜效果通常是指在前端开发中使用 React 技术实现的一种交互式功能，让用户能够放大图片或者内容区域。这个效果通常是通过 CSS 的 `transform: scale()` 属性结合组件的状态或 props 来实现的。当你点击某个区域或者触发某些事件时，会改变元素的缩放比例，提供类似看图软件中的放大效果。

以下是实现简单放大镜效果的一个基本步骤：

1. 创建一个 React 组件，包含一个原图容器和一个可放大显示的子元素（如 `<img>` 或 `<div>`）。
2. 给原图添加样式，设置初始缩放比例为 1。
3. 定义一个状态变量来存储当前的缩放比例，初始化为 1（非放大）。
4. 添加事件处理函数，在用户触发事件（如鼠标移动、双击等）时更新缩放比例。
5. 使用 `style` 属性动态设置子元素的 `scale` 样式，实现放大效果。

下面是一个简单的示例代码：

import React, { useState } from 'react';

const ZoomableImage = ({ src }) => {
  const [zoom, setZoom] = useState(1);

  const handleMouseEnter = () => setZoom(1.05);
  const handleMouseLeave = () => setZoom(1);
  const handleClick = () => setZoom(zoom > 1 ? 1 : zoom + 0.1); // 鼠标单击放大

  return (
    <div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
      <img src={src} style={{ transform: `scale(${zoom})`, transition: 'transform 0.3s' }} />
      <button onClick={handleClick}>放大</button>
    </div>
  );
};

export default ZoomableImage;