reactjs - 如何将 React Modal 与 map 功能一起使用？

Question

我正在通过数据进行映射，我想单击一个图像并弹出一个带有 data.title 和 data.info 的模态弹出窗口。每个模态仅显示我数组中的最后数据。我读到所有模态都一起弹出，我只看到最后一个，但我不太明白如何解决这个问题，尤其是 React 中的函数组件。时间差

 export default function SomeComponent   
 const [modalIsOpen, setModalIsOpen] = 
 useState(false);
 const customStyles = {
  content: {
    top: '35%',
    left: '50%',
    right: 'auto',
    bottom: 'auto',
    marginRight: '-50%',
    width: '60%',
    transform: 'translate(-40%, -10%)',
  },
}
  return (
    <div className="container">


    { somedata.map((data) => 
    (<div className='item' key={data.id} >
    <img src={data.img} alt='' onClick={()=> setModalIsOpen(true)} />
    <Modal isOpen={modalIsOpen} onRequestClose={() => setModalIsOpen(false)} style={customStyles}>
      <h1>{data.title</h1>
      <p>{data.content</p> 
    <div>
    <button onClick={() => setModalIsOpen(false)}>X</button>
    </div>
    </Modal>
   </div>))}
 </div>
</div>
  );}

Answer 1

您应该只使用 Modal 组件的一个实例，并使用一种状态将点击图像的数据传递给它。每次单击图像时，模态数据都应使用单击图像的数据进行更新。请参见下面的示例。我已经修改了您的代码以使其正常工作。

 export default function SomeComponent() {  
   const [modalIsOpen, setModalIsOpen] = useState(false);
   const [modalData, setModalData] = useState(null);
   const customStyles = {
    content: {
      top: '35%',
      left: '50%',
      right: 'auto',
      bottom: 'auto',
      marginRight: '-50%',
      width: '60%',
      transform: 'translate(-40%, -10%)',
    },
  }
  return (
    <>
      <div className="container">
        {somedata.map(data => (
          <div className='item' key={data.id} >
            <img 
              src={data.img} 
              alt='' 
              onClick={()=> {
                setModalData(data);
                setModalIsOpen(true);
              }
            />
          </div>
        ))}
      </div>
      <Modal isOpen={modalIsOpen} onRequestClose={() => setModalIsOpen(false)} style={customStyles}>
        <h1>{modalData.title}</h1>
        <p>{modalData.content}</p> 
        <div>
         <button onClick={() => setModalIsOpen(false)}>X</button>
        </div>
      </Modal>
    </>
  )
}