react写一个模态化窗口
时间: 2023-10-11 08:05:57 浏览: 35
好的,我可以为您提供一个简单的React模态窗口示例代码:
```javascript
import React, { useState } from 'react';
const Modal = ({ isOpen, onClose, children }) => {
if (!isOpen) return null;
return (
<div className="modal">
<div className="modal-overlay" onClick={onClose}></div>
<div className="modal-content">
{children}
<button onClick={onClose}>Close</button>
</div>
</div>
);
};
const App = () => {
const [isOpen, setIsOpen] = useState(false);
const handleOpenModal = () => {
setIsOpen(true);
};
const handleCloseModal = () => {
setIsOpen(false);
};
return (
<div>
<button onClick={handleOpenModal}>Open Modal</button>
<Modal isOpen={isOpen} onClose={handleCloseModal}>
<h2>Modal Title</h2>
<p>Modal Content</p>
</Modal>
</div>
);
};
export default App;
```
这个模态窗口组件接受三个prop:isOpen(用于控制模态窗口是否打开),onClose(用于关闭模态窗口的回调函数)和children(用于呈现模态窗口内容)。
在App组件中,我们使用useState钩子来管理isOpen状态,并使用handleOpenModal和handleCloseModal回调函数来打开和关闭模态窗口。当我们单击打开模态窗口的按钮时,将调用handleOpenModal函数,该函数将isOpen状态设置为true,从而显示模态窗口。当我们单击模态窗口中的关闭按钮时,将调用handleCloseModal函数,该函数将isOpen状态设置为false,从而关闭模态窗口。
您可以将上面的代码复制并在您的React应用程序中使用它,根据您的需要进行修改和调整。