如何在 React 中实现点击图片列表项后在新页面/弹窗中显示对应图片

export default function MyPhotos() {
  const [isOpen, setIsOpen] = useState(false);

  const openNewPage = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div>
      {contents.map((content) => {
        return (
          <div key={content.id}>
            <img // 所有图片在此处显示，正常
              onClick={openNewPage} // 点击图片时打开新页面/弹窗
              src={content.image}
            />
            <PageComponent isOpen={isOpen} onClose={openNewPage}>
              <img
                onClick={openNewPage}
                src={content.image} // 问题所在：始终显示列表中最后一张图片
              />
            </PageComponent>
          </div>
        );
      })}
    </div>
  );
}

import React, { useState } from 'react';
import PageComponent from './PageComponent'; // 假设 PageComponent 在同级目录

const contents = [ // 示例数据
  { id: 0, image: 'https://via.placeholder.com/150/FF0000/FFFFFF?text=Img0', text: "ABC" },
  { id: 1, image: 'https://via.placeholder.com/150/00FF00/FFFFFF?text=Img1', text: "ABCD" },
  { id: 2, image: 'https://via.placeholder.com/150/0000FF/FFFFFF?text=Img2', text: "ABCDE" },
];

export default function MyPhotos() {
  const [isOpen, setIsOpen] = useState(false);
  const [selectedImageSrc, setSelectedImageSrc] = useState(''); // 新增状态：存储选定图片的源地址

  const openNewPage = (imageSrc) => { // 修改 openNewPage 函数，接收图片源地址
    setSelectedImageSrc(imageSrc); // 更新选定图片的源地址
    setIsOpen(true); // 打开弹窗
  };

  const closeNewPage = () => { // 添加关闭弹窗的函数
    setIsOpen(false);
    setSelectedImageSrc(''); // 清空选定图片源地址
  };

  return (
    <div>
      {contents.map((content) => (
        <div key={content.id}>
          <img
            onClick={() => openNewPage(content.image)} // 点击时传入当前图片的源地址
            src={content.image}
            alt={`Image ${content.id}`}
            style={{ cursor: 'pointer', margin: '10px' }}
          />
        </div>
      ))}

      {/* PageComponent 应该只渲染一次，并在 isOpen 为 true 时显示 */}
      <PageComponent 
        isOpen={isOpen} 
        onClose={closeNewPage} 
        imgSrc={selectedImageSrc} // 将选定图片的源地址作为 props 传递
      />
    </div>
  );
}

// PageComponent.jsx
import React from 'react';

export default function PageComponent({ isOpen, onClose, imgSrc }) {
  if (!isOpen) {
    return null; // 如果不打开，则不渲染任何内容
  }

  return (
    <div style={{
      position: 'fixed',
      top: 0,
      left: 0,
      width: '100%',
      height: '100%',
      backgroundColor: 'rgba(0,0,0,0.5)',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      zIndex: 1000
    }}>
      <div style={{
        backgroundColor: 'white',
        padding: '20px',
        borderRadius: '8px',
        textAlign: 'center'
      }}>
        <h2>选中的图片</h2>
        {imgSrc && <img src={imgSrc} alt="Selected" style={{ maxWidth: '80%', maxHeight: '70vh' }} />}
        <button onClick={onClose} style={{ marginTop: '20px', padding: '10px 20px' }}>关闭</button>
      </div>
    </div>
  );
}

// PageComponent.jsx (动态更新版本)
import React, { useState, useEffect } from 'react';

export default function PageComponent({ isOpen, onClose, imgSrc }) {
  const [currentImgSrc, setCurrentImgSrc] = useState(""); // 内部状态来存储图片源

  // 使用 useEffect 监听 props.imgSrc 的变化
  useEffect(() => {
    if (imgSrc) { // 确保 imgSrc 不为空
      setCurrentImgSrc(imgSrc);
    }
  }, [imgSrc]); // 依赖项为 imgSrc，当 imgSrc 变化时执行

  if (!isOpen) {
    return null;
  }

  return (
    <div style={{
      position: 'fixed',
      top: 0,
      left: 0,
      width: '100%',
      height: '100%',
      backgroundColor: 'rgba(0,0,0,0.5)',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      zIndex: 1000
    }}>
      <div style={{
        backgroundColor: 'white',
        padding: '20px',
        borderRadius: '8px',
        textAlign: 'center'
      }}>
        <h2>选中的图片</h2>
        {currentImgSrc && <img src={currentImgSrc} alt="Selected" style={{ maxWidth: '80%', maxHeight: '70vh' }} />}
        <button onClick={onClose} style={{ marginTop: '20px', padding: '10px 20px' }}>关闭</button>
      </div>
    </div>
  );
}