React中精确匹配并展示列表中的特定元素：避免显示错误图片

import React, { useState } from 'react';

// 假设 contents 数组包含图片数据
// const contents = [
//   { id: 0, image: 'path/to/img0.jpg', text: 'Image 0' },
//   { id: 1, image: 'path/to/img1.jpg', text: 'Image 1' },
//   // ... 更多图片
// ];

// PageComponent 模拟一个弹窗或详情页
function PageComponent({ isOpen, onClose, children }) {
  if (!isOpen) return null; // 如果不打开则不渲染

  return (
    <div style={{
      position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
      backgroundColor: 'rgba(0,0,0,0.5)', display: 'flex',
      justifyContent: 'center', alignItems: 'center', zIndex: 1000
    }} onClick={onClose}>
      <div style={{ backgroundColor: 'white', padding: '20px', borderRadius: '8px' }} onClick={(e) => e.stopPropagation()}>
        {children} {/* 通过 children 传递图片 */}
        <button onClick={onClose} style={{ marginTop: '10px' }}>关闭</button>
      </div>
    </div>
  );
}

export default function MyPhotos({ contents }) { // 假设 contents 通过 props 传入
  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}
              alt={`Image ${content.id}`}
              style={{ width: '100px', height: '100px', margin: '5px', cursor: 'pointer' }}
            />
            {/* PageComponent 在循环内部渲染，并尝试通过 children 显示图片 */}
            <PageComponent isOpen={isOpen} onClose={openNewPage}>
                <img
                  src={content.image} // 这里的 content.image 引用是问题的根源
                  alt={`Displayed Image ${content.id}`}
                  style={{ maxWidth: '300px', maxHeight: '300px' }}
                />
            </PageComponent>
          </div>
        );
      })}
    </div>
  );
}