如何只打开特定的模态窗口？

Question

我只需要打开我单击的模态 div。但是当我单击任何元素时它们都会打开。如何使其仅进入我点击的模式？应用程序.jsimport { useEffect, useState } from "react";import Modal from "./components/Modal";import "./style.css";function App() {  useEffect(() => {    fetch(      "https://api.unsplash.com/photos/?client_id=cf49c08b444ff4cb9e4d126b7e9f7513ba1ee58de7906e4360afc1a33d1bf4c0"    )      .then((res) => res.json())      .then((result) => setItem(result));  }, []);  const [item, setItem] = useState([]);  const [modalActive, setModalActive] = useState(false);  return (    <div className="app">      {item.map((item) => (        <div          className="image-container"          key={item.id}          onClick={() => setModalActive(true)}        >          <img className="image" src={item.urls.regular} alt="logo" />          <div className="info">            <img              className="avatar"              src={item.user.profile_image.small}              alt="avatar"            />            <div className="text">              <p className="name">{item.user.username}</p>              <p className="name">{item.alt_description}</p>            </div>          </div>          <Modal            active={modalActive}            setActive={setModalActive}            url={item.urls.regular}          />        </div>      ))}    </div>  );}export default App;模态.jsximport React from "react";import "./index.css";const Modal = ({ setActive, active, url }) => {  return (    <div      className={active ? "modal active" : "modal"}      onClick={() => setActive(false)}    >      <div className="modal__img">        <img src={url}/>      </div>    </div>  );};export default Modal;

Answer 1

其他解决方案是使用索引来显示或隐藏模式：

 <div className="app">

      {item.map((item, index) => (

        <div

          className="image-container"

          key={item.id}

          onClick={() => setModalActive(index)}

        >

          <img className="image" src={item.urls.regular} alt="logo" />

          <div className="info">

            <img

              className="avatar"

              src={item.user.profile_image.small}

              alt="avatar"

            />

            <div className="text">

              <p className="name">{item.user.username}</p>

              <p className="name">{item.alt_description}</p>

            </div>

          </div>

          <Modal

            active={modalActive === index}

            setActive={setModalActive}

            url={item.urls.regular}

          />

        </div>

      ))}

    </div>