如何通过在react中单击图像来查看模式？(instagram克隆编码)

import React, { useState } from 'react';

// ImageModal组件
const ImageModal = ({ selectedImage, setSelectedImage }) => {
  // 根据标志位showModal来显示或隐藏模态框
  const showModal = selectedImage !== null;

  return (
    <div className={`modal ${showModal ? 'show' : ''}`}>
      {selectedImage && <img src={selectedImage} alt="Selected" />}
    </div>
  );
};

// ImageGrid组件
const ImageGrid = () => {
  const [selectedImage, setSelectedImage] = useState(null);

  // 点击事件处理程序
  const handleClick = (image) => {
    setSelectedImage(image);
  };

  return (
    <div className="image-grid">
      <img src="image1.jpg" alt="Image 1" onClick={() => handleClick('image1.jpg')} />
      <img src="image2.jpg" alt="Image 2" onClick={() => handleClick('image2.jpg')} />
      <img src="image3.jpg" alt="Image 3" onClick={() => handleClick('image3.jpg')} />

      <ImageModal selectedImage={selectedImage} setSelectedImage={setSelectedImage} />
    </div>
  );
};

// App组件
const App = () => {
  return (
    <div className="app">
      <h1>Image Gallery</h1>
      <ImageGrid />
    </div>
  );
};

export default App;