react modal组件demo
时间: 2023-10-01 13:08:52 浏览: 51
您好,以下是React Modal组件的一个简单示例代码:
import React, { useState } from 'react';
import Modal from 'react-modal';
Modal.setAppElement('#root');
function ExampleModal() {
const [modalOpen, setModalOpen] = useState(false);
const handleOpenModal = () => {
setModalOpen(true);
};
const handleCloseModal = () => {
setModalOpen(false);
};
return (
<>
<button onClick={handleOpenModal}>Open Modal</button>
<Modal
isOpen={modalOpen}
onRequestClose={handleCloseModal}
contentLabel="Example Modal"
>
<h2>Modal Title</h2>
<p>Modal content goes here.</p>
<button onClick={handleCloseModal}>Close Modal</button>
</Modal>
</>
);
}
export default ExampleModal;
希望对您有帮助。请问还有什么其它问题需要回答吗?