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>