如何在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
                  src={content.image} // 问题所在：这里总是显示最后一张图片
                />
            </PageComponent>
          </div>
        );
      })}
    </div>
  );
}

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

// 示例数据，实际应用中可能从API获取
const contents = [
  { id: 0, image: 'https://via.placeholder.com/200/FF0000/FFFFFF?text=Image+0', text: "红色图片" },
  { id: 1, image: 'https://via.placeholder.com/200/00FF00/FFFFFF?text=Image+1', text: "绿色图片" },
  { id: 2, image: 'https://via.placeholder.com/200/0000FF/FFFFFF?text=Image+2', text: "蓝色图片" },
];

export default function MyPhotos() {
  const [isOpen, setIsOpen] = useState(false);
  const [selectedImageSrc, setSelectedImageSrc] = useState(null); // 新增状态：存储被选中图片的URL

  // 修改 openNewPage 函数，使其接收被点击图片的URL
  const openNewPage = (imageSrc) => {
    setSelectedImageSrc(imageSrc); // 设置被点击的图片URL
    setIsOpen(true); // 打开模态框
  };

  // 添加关闭模态框的函数
  const closeNewPage = () => {
    setIsOpen(false);
    setSelectedImageSrc(null); // 关闭时清空选中图片状态
  };

  return (
    <div>
      <h2>我的图片库</h2>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '15px', padding: '20px' }}>
        {contents.map((content) => (
          <div key={content.id} style={{ border: '1px solid #eee', borderRadius: '5px', padding: '10px', boxShadow: '0 2px 5px rgba(0,0,0,0.1)' }}>
            <img
              onClick={() => openNewPage(content.image)} // 点击时传递具体的图片URL
              src={content.image}
              alt={`Image ${content.id}`}
              style={{ width: '150px', height: '150px', objectFit: 'cover', cursor: 'pointer', borderRadius: '3px' }}
            />
            <p style={{ textAlign: 'center', marginTop: '8px', fontSize: '0.9em', color: '#555' }}>{content.text}</p>
          </div>
        ))}
      </div>

      {/* PageComponent 移到 map 外部，只渲染一次 */}
      <PageComponent
        isOpen={isOpen}
        onClose={closeNewPage} // 传递关闭函数
        imgSrc={selectedImageSrc} // 传递选中的图片URL
      />
    </div>
  );
}

import React, { useEffect, useState } from 'react';

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

  return (
    <div style={{
      position: 'fixed',
      top: 0,
      left: 0,
      width: '100vw',
      height: '100vh',
      backgroundColor: 'rgba(0, 0, 0, 0.7)',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      zIndex: 1000,
      transition: 'opacity 0.3s ease-in-out',
      opacity: isOpen ? 1 : 0,
      pointerEvents: isOpen ? 'auto' : 'none'
    }}>
      <div style={{
        backgroundColor: 'white',
        padding: '25px',
        borderRadius: '10px',
        position: 'relative',
        maxWidth: '90%',
        maxHeight: '90%',
        overflow: 'hidden', // 确保内容超出时隐藏
        boxShadow: '0 5px 15px rgba(0,0,0,0.3)',
        transform: isOpen ? 'scale(1)' : 'scale(0.9)',
        transition: 'transform 0.3s ease-in-out'
      }}>
        <button
          onClick={onClose}
          style={{
            position: 'absolute',
            top: '15px',
            right: '15px',
            background: 'none',
            border: 'none',
            fontSize: '2em',
            cursor: 'pointer',
            color: '#333',
            lineHeight: '1',
            padding: '0'
          }}
        >
          &times;
        </button>
        {imgSrc ? (
          <img
            src={imgSrc}
            alt="Selected Item"
            style={{
              maxWidth: '100%',
              maxHeight: 'calc(100vh - 120px)', // 预留一些边距和按钮空间
              display: 'block',
              margin: '0 auto',
              borderRadius: '5px'
            }}
          />
        ) : (
          <p style={{ textAlign: 'center', color: '#666' }}>未选择图片或图片加载失败。</p>
        )}
      </div>
    </div>
  );
}