嘿，这个需求在项目里太常见了，我给你一步步拆解实现思路，附上完整代码示例，你直接就能用！

核心思路 #

咱们需要通过状态控制来切换图片的普通/放大状态，同时处理点击事件来触发状态变化：

1. 用状态记录是否处于放大模式，以及当前选中的图片信息
2. 点击列表中的图片时，激活放大模式并传入当前图片数据
3. 点击遮罩层（或按ESC键）时，退出放大模式

完整代码实现 #

import { useState, useEffect } from 'react';

// 模拟你的图片列表数据
const imageList = [
  { id: 1, url: '/path/to/image1.jpg', title: '风景图1', desc: '这是一张美丽的山水风景' },
  { id: 2, url: '/path/to/image2.jpg', title: '风景图2', desc: '海边日落的治愈瞬间' },
  { id: 3, url: '/path/to/image3.jpg', title: '风景图3', desc: '森林里的静谧时光' },
];

const ImageGallery = () => {
  // 状态管理：是否放大、选中的图片
  const [isZoomed, setIsZoomed] = useState(false);
  const [selectedImage, setSelectedImage] = useState(null);

  // 监听ESC键关闭放大模式
  useEffect(() => {
    const handleEsc = (e) => {
      if (e.key === 'Escape') setIsZoomed(false);
    };
    window.addEventListener('keydown', handleEsc);
    return () => window.removeEventListener('keydown', handleEsc);
  }, []);

  // 点击图片触发放大
  const handleImageClick = (image) => {
    setSelectedImage(image);
    setIsZoomed(true);
  };

  // 点击遮罩层关闭放大（注意阻止内容区域的事件冒泡）
  const handleZoomClose = () => {
    setIsZoomed(false);
    setSelectedImage(null);
  };

  return (
    <div className="image-gallery">
      {/* 图片列表 */}
      <div className="image-list">
        {imageList.map(image => (
          <img
            key={image.id}
            src={image.url}
            alt={image.title}
            className="gallery-image"
            onClick={() => handleImageClick(image)}
          />
        ))}
      </div>

      {/* 放大遮罩层（仅在isZoomed为true时显示） */}
      {isZoomed && selectedImage && (
        <div className="zoom-overlay" onClick={handleZoomClose}>
          <div className="zoom-content" onClick={(e) => e.stopPropagation()}>
            <img src={selectedImage.url} alt={selectedImage.title} className="zoomed-image" />
            <div className="image-info">
              <h3>{selectedImage.title}</h3>
              <p>{selectedImage.desc}</p>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default ImageGallery;

对应的CSS样式（很重要！） #

给元素加上样式才能让效果正常展示，你可以根据自己的需求调整：

.image-gallery {
  padding: 20px;
}

.image-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}

.gallery-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
  cursor: zoom-in;
  border-radius: 8px;
  transition: transform 0.2s;
}

.gallery-image:hover {
  transform: scale(1.05);
}

/* 放大遮罩层 */
.zoom-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  cursor: zoom-out;
}

.zoom-content {
  max-width: 90%;
  max-height: 90%;
  cursor: default;
}

.zoomed-image {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 8px;
}

.image-info {
  color: white;
  margin-top: 15px;
  text-align: center;
}

关键细节说明 #

• 阻止事件冒泡：放大内容区域的onClick={(e) => e.stopPropagation()}很重要，不然点击图片本身也会触发关闭
• ESC键监听：用useEffect添加全局键盘监听，组件卸载时记得移除，避免内存泄漏
• 响应式设计：通过max-width/max-height确保放大后的图片在不同屏幕上都能正常显示
• 过渡动画：给列表图片和遮罩层添加过渡效果，让交互更流畅

可选优化点 #

如果需要更丰富的功能，还可以加这些：

• 支持滚轮缩放放大后的图片
• 添加图片切换按钮（左右箭头切换上/下一张）
• 加载状态提示（图片加载时显示骨架屏）
• 自定义放大动画（比如从原图片位置过渡到放大位置）

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