React中如何从可点击图片列表将对应变量传递给Modal弹窗

你只需要新增一个状态存储当前点击的图片资源，再通过props传递给弹窗组件即可，修改代码如下：

步骤1：修改Garden.js #

• 新增selectedImage状态存储选中的图片base64资源
• 点击图片时同时更新selectedImage和弹窗开关状态
• 把selectedImage作为props传递给ImageModal组件

import { useState } from 'react';
// 其他原有引入保持不变

export default function Garden() {
  const [openImageModal, setOpenImageModal] = useState(false);
  // 新增状态存储当前选中的图片资源
  const [selectedImage, setSelectedImage] = useState(null);
  
  // 原有获取garden、images数据的逻辑保持不变

  return (
    <div>
      <div>
        <h1>{garden.title}</h1>
        <div>
        {
          images.map((image) => (
            <img
              src={image.image}
              key={image.id}
              alt={garden.title}
              onClick={() => {
                // 点击时记录当前点击的图片资源
                setSelectedImage(image.image);
                setOpenImageModal(true);
              }}
            ></img>
          ))
        }
      </div>
      {/* 将选中的图片资源传递给弹窗组件 */}
      {openImageModal && <ImageModal 
        closeImageModal={setOpenImageModal}
        currentImage={selectedImage}
      />}
    </div>
  );
}

步骤2：修改ImageModal.js #

• 接收传入的currentImageprops，替换原有theProperImage变量
• 补充根节点包裹避免多根节点报错，同时可以在关闭时做额外清理

export default function ImageModal({ closeImageModal, currentImage }) {
  const handleClose = () => {
    closeImageModal(false);
  }
  return (
    <>
      <div>
          <button onClick={handleClose}>x</button>
      </div>
      <div>
          <img src={currentImage} alt="花园预览图"></img>
      </div>
    </>
  );
}

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