React实现图片点击放大至Slide组件的功能求助

核心逻辑 #

• 将控制Slide显示/隐藏的状态（isSlideOpen）和当前选中的图片数据（currentImage）放在最外层的Portfolio容器组件中，通过props传递给子组件。
• 给Work组件绑定点击事件，触发时更新状态，打开Slide并传入当前图片的信息。
• Slide组件根据状态决定是否渲染，展示大图并提供关闭交互。

1. 修改Portfolio组件 #

import { useState } from 'react';
import Work from './Work';
import Slide from './Slide';

function Portfolio() {
  // 控制Slide的显示状态
  const [isSlideOpen, setIsSlideOpen] = useState(false);
  // 存储当前点击的图片数据（可根据需求扩展字段，比如标题、描述）
  const [currentImage, setCurrentImage] = useState(null);

  // 打开Slide的回调，接收点击的图片数据
  const openSlide = (image) => {
    setCurrentImage(image);
    setIsSlideOpen(true);
  };

  // 关闭Slide的回调
  const closeSlide = () => {
    setIsSlideOpen(false);
    setCurrentImage(null);
  };

  // 示例图片列表数据，可替换为你的实际数据
  const workList = [
    { id: 1, imgUrl: '/path/to/image1.jpg', altText: '作品1' },
    { id: 2, imgUrl: '/path/to/image2.jpg', altText: '作品2' },
    { id: 3, imgUrl: '/path/to/image3.jpg', altText: '作品3' },
  ];

  return (
    <div className="portfolio-container">
      {/* 渲染图片列表，传递点击回调给每个Work组件 */}
      {workList.map(work => (
        <Work
          key={work.id}
          workData={work}
          onImageClick={() => openSlide(work)}
        />
      ))}
      {/* 渲染Slide组件，传递状态和关闭方法 */}
      <Slide
        isVisible={isSlideOpen}
        targetImage={currentImage}
        onClose={closeSlide}
      />
    </div>
  );
}

export default Portfolio;

2. 修改Work组件 #

function Work({ workData, onImageClick }) {
  return (
    <div className="work-item" onClick={onImageClick}>
      {/* 缩略图，点击触发父组件的回调 */}
      <img
        src={workData.imgUrl}
        alt={workData.altText}
        className="work-thumbnail"
      />
      {/* 可保留Work组件原有内容，比如标题、标签等 */}
      <p className="work-title">{workData.altText}</p>
    </div>
  );
}

export default Work;

3. 实现Slide组件 #

function Slide({ isVisible, targetImage, onClose }) {
  // Slide未打开或无目标图片时，不渲染任何内容
  if (!isVisible || !targetImage) return null;

  return (
    {/* 全屏遮罩层，点击可关闭Slide */}
    <div className="slide-overlay" onClick={onClose}>
      {/* 大图容器，阻止点击事件冒泡到遮罩层 */}
      <div className="slide-modal" onClick={(e) => e.stopPropagation()}>
        {/* 关闭按钮 */}
        <button className="slide-close-btn" onClick={onClose}>
          ×
        </button>
        {/* 展示大图 */}
        <img
          src={targetImage.imgUrl}
          alt={targetImage.altText}
          className="slide-large-img"
        />
      </div>
    </div>
  );
}

export default Slide;

基础样式参考（可选） #

/* 遮罩层样式 */
.slide-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: 999;
}

/* 大图容器样式 */
.slide-modal {
  position: relative;
  max-width: 90%;
  max-height: 90%;
}

/* 关闭按钮样式 */
.slide-close-btn {
  position: absolute;
  top: -40px;
  right: 0;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
}

/* 大图样式 */
.slide-large-img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

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