react实现弹窗
使用 React Portals 实现弹窗
React Portals 提供了一种将子节点渲染到父组件 DOM 层次结构之外的 DOM 节点的方式，非常适合实现弹窗功能。
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
const Modal = ({ children, onClose }) => {
return ReactDOM.createPortal(
<div className="modal-overlay">
<div className="modal-content">
<button onClick={onClose}>关闭</button>
{children}
</div>
</div>,
document.body
);
};
function App() {
const [showModal, setShowModal] = useState(false);
return (
<div>
<button onClick={() => setShowModal(true)}>打开弹窗</button>
{showModal && (
<Modal onClose={() => setShowModal(false)}>
<h2>弹窗内容</h2>
<p>这是一个使用Portal实现的弹窗示例。</p>
</Modal>
)}
</div>
);
}使用 CSS 控制弹窗样式
弹窗通常需要覆盖整个屏幕并居中显示内容，可以通过CSS实现这一效果。
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal-content {
background: white;
padding: 20px;
border-radius: 8px;
max-width: 500px;
width: 90%;
}使用第三方库实现弹窗
对于更复杂的需求，可以使用成熟的第三方弹窗库如 react-modal 或 @mui/material 的 Dialog 组件。
import React from 'react';
import Modal from 'react-modal';
Modal.setAppElement('#root');
function App() {
const [modalIsOpen, setIsOpen] = React.useState(false);
return (
<div>
<button onClick={() => setIsOpen(true)}>打开弹窗</button>
<Modal
isOpen={modalIsOpen}
onRequestClose={() => setIsOpen(false)}
contentLabel="示例弹窗"
>
<h2>弹窗标题</h2>
<p>弹窗内容</p>
<button onClick={() => setIsOpen(false)}>关闭</button>
</Modal>
</div>
);
}实现动画效果
为弹窗添加动画可以提升用户体验，可以使用CSS transitions或react-transition-group库。
import { CSSTransition } from 'react-transition-group';
function AnimatedModal({ show, onClose, children }) {
return (
<CSSTransition
in={show}
timeout={300}
classNames="modal"
unmountOnExit
>
<div className="modal-overlay">
<div className="modal-content">
{children}
<button onClick={onClose}>关闭</button>
</div>
</div>
</CSSTransition>
);
}弹窗状态管理
对于复杂应用，可以考虑使用Context或状态管理库如Redux来管理弹窗状态。
const ModalContext = React.createContext();
function ModalProvider({ children }) {
const [modal, setModal] = useState(null);
const openModal = (content) => setModal(content);
const closeModal = () => setModal(null);
return (
<ModalContext.Provider value={{ openModal, closeModal }}>
{children}
{modal && (
<Modal onClose={closeModal}>
{modal}
</Modal>
)}
</ModalContext.Provider>
);
}无障碍访问
确保弹窗符合无障碍访问标准，包括正确的焦点管理和ARIA属性。
<div
role="dialog"
aria-modal="true"
aria-labelledby="modal-title"
>
<h2 id="modal-title">弹窗标题</h2>
{/* 弹窗内容 */}
</div>
