React组件间图片显示问题：通过Props实现精确数据传递与动态更新

// MyPhotos.jsx (原始问题代码片段)
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} // 问题所在：这里的content.image总是指向map循环的最后一个元素
                />
            </PageComponent>
          </div>
        );
      })}
    </div>
  );
}

// MyPhotos.jsx (修改后)
import React, { useState } from 'react';
import PageComponent from './PageComponent'; // 假设PageComponent在同级或指定路径

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

export default function MyPhotos() {
  const [isOpen, setIsOpen] = useState(false);
  const [selectedImageSrc, setSelectedImageSrc] = useState(''); // 新增状态，存储被点击图片的src

  // 修改 openNewPage 函数，接收图片src作为参数
  const handleImageClick = (imageSrc) => {
    setSelectedImageSrc(imageSrc); // 更新被点击图片的src
    setIsOpen(true); // 打开模态框/新页面
  };

  const closeNewPage = () => {
    setIsOpen(false);
    setSelectedImageSrc(''); // 关闭时清空选择
  };

  return (
    <div>
      {contents.map((content) => (
        <div key={content.id} style={{ display: 'inline-block', margin: '10px' }}>
          <img
            onClick={() => handleImageClick(content.image)} // 点击时传递当前图片的src
            src={content.image}
            alt={`Image ${content.id}`}
            style={{ width: '100px', height: '100px', cursor: 'pointer' }}
          />
          {/* PageComponent 应该只渲染一次，并在isOpen时显示，而不是在map循环中每个都渲染 */}
          {/* 这里的渲染方式是错误的，会导致多个PageComponent实例。
              正确的做法是：PageComponent在MyPhotos组件的return中只出现一次，
              或者作为路由页面根据URL参数渲染。
              但为了演示数据传递，我们暂时保留其在map外层。
              如果PageComponent是模态框，它应该只在MyPhotos组件的顶层渲染一次。
          */}
        </div>
      ))}

      {/* 假设 PageComponent 是一个模态框，它应该在父组件的顶层渲染一次 */}
      <PageComponent
        isOpen={isOpen}
        onClose={closeNewPage}
        imgSrc={selectedImageSrc} // 将被点击的图片src作为prop传递
      />
    </div>
  );
}

// PageComponent.jsx (修改后)
import React, { useState, useEffect } from 'react';

export default function PageComponent({ isOpen, onClose, imgSrc }) {
  // 模态框样式（简化示例）
  const modalStyle = {
    display: isOpen ? 'block' : 'none', // 控制显示/隐藏
    position: 'fixed',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    backgroundColor: 'rgba(0,0,0,0.5)',
    zIndex: 1000,
    justifyContent: 'center',
    alignItems: 'center',
    padding: '20px',
    boxSizing: 'border-box'
  };

  const modalContentStyle = {
    backgroundColor: '#fff',
    padding: '20px',
    borderRadius: '8px',
    maxWidth: '80%',
    maxHeight: '80%',
    overflow: 'auto',
    position: 'relative',
    textAlign: 'center'
  };

  const closeButtonStyle = {
    position: 'absolute',
    top: '10px',
    right: '10px',
    cursor: 'pointer',
    fontSize: '24px',
    fontWeight: 'bold',
    color: '#333'
  };

  if (!isOpen) {
    return null; // 如果不打开，则不渲染任何内容
  }

  return (
    <div style={modalStyle}>
      <div style={modalContentStyle}>
        <span style={closeButtonStyle} onClick={onClose}>&times;</span>
        <h2>图片详情</h2>
        {imgSrc ? (
          <img
            src={imgSrc} // 使用从props接收到的imgSrc
            alt="Selected"
            style={{ maxWidth: '100%', maxHeight: 'calc(100vh - 150px)' }} // 调整图片大小以适应模态框
          />
        ) : (
          <p>未选择图片</p>
        )}
      </div>
    </div>
  );
}

// PageComponent.jsx (使用 useState 和 useEffect 处理动态更新)
import React, { useState, useEffect } from 'react';

export default function PageComponent({ isOpen, onClose, imgSrc }) {
  const [currentImageSrc, setCurrentImageSrc] = useState(""); // 内部状态来管理图片src

  useEffect(() => {
    // 当 imgSrc prop 改变时，更新内部状态
    setCurrentImageSrc(imgSrc);
  }, [imgSrc]); // 依赖数组包含 imgSrc，确保当 imgSrc 变化时 effect 重新运行

  // ... 模态框样式代码保持不变 ...

  if (!isOpen) {
    return null;
  }

  return (
    <div style={modalStyle}>
      <div style={modalContentStyle}>
        <span style={closeButtonStyle} onClick={onClose}>&times;</span>
        <h2>图片详情</h2>
        {currentImageSrc ? ( // 使用内部状态 currentImageSrc
          <img
            src={currentImageSrc}
            alt="Selected"
            style={{ maxWidth: '100%', maxHeight: 'calc(100vh - 150px)' }}
          />
        ) : (
          <p>未选择图片</p>
        )}
      </div>
    </div>
  );
}