当前位置：首页 > React

react 实现弹框

2026-01-26 18:34:21React

实现弹框的基本方法

在React中实现弹框可以通过多种方式完成，常见的有使用原生React状态管理、第三方库或自定义组件。以下是几种常见方法：

使用React状态管理实现基础弹框通过useState控制弹框的显示与隐藏，结合CSS实现样式。示例代码如下：

import React, { useState } from 'react';
import './Modal.css';

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>打开弹框</button>
      {isOpen && (
        <div className="modal-overlay">
          <div className="modal-content">
            <h2>弹框标题</h2>
            <p>弹框内容</p>
            <button onClick={() => setIsOpen(false)}>关闭</button>
          </div>
        </div>
      )}
    </div>
  );
}

export default App;

对应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;
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 5px;
  max-width: 500px;
  width: 100%;
}

使用第三方库实现弹框

对于更复杂的需求，可以使用成熟的第三方库如react-modal或@material-ui/core的Dialog组件。

使用react-modal示例：

react 实现弹框

import React, { useState } from 'react';
import Modal from 'react-modal';

Modal.setAppElement('#root');

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>打开弹框</button>
      <Modal
        isOpen={isOpen}
        onRequestClose={() => setIsOpen(false)}
        contentLabel="示例弹框"
      >
        <h2>弹框标题</h2>
        <p>弹框内容</p>
        <button onClick={() => setIsOpen(false)}>关闭</button>
      </Modal>
    </div>
  );
}

创建可复用的弹框组件

将弹框逻辑封装成可复用组件：

import React from 'react';

function Modal({ isOpen, onClose, children }) {
  if (!isOpen) return null;

  return (
    <div className="modal-overlay">
      <div className="modal-content">
        <button className="close-button" onClick={onClose}>×</button>
        {children}
      </div>
    </div>
  );
}

export default Modal;

使用方式：

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>打开弹框</button>
      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
        <h2>自定义内容</h2>
        <p>可以传递任意子组件</p>
      </Modal>
    </div>
  );
}

弹框动画效果实现

为弹框添加动画效果可以使用CSS过渡或react-transition-group库：

react 实现弹框

import { CSSTransition } from 'react-transition-group';

function AnimatedModal({ isOpen, onClose, children }) {
  return (
    <CSSTransition
      in={isOpen}
      timeout={300}
      classNames="modal"
      unmountOnExit
    >
      <div className="modal-overlay" onClick={onClose}>
        <div className="modal-content" onClick={e => e.stopPropagation()}>
          {children}
        </div>
      </div>
    </CSSTransition>
  );
}

对应CSS：

.modal-enter {
  opacity: 0;
}
.modal-enter-active {
  opacity: 1;
  transition: opacity 300ms;
}
.modal-exit {
  opacity: 1;
}
.modal-exit-active {
  opacity: 0;
  transition: opacity 300ms;
}

弹框最佳实践

确保弹框可访问性：添加role="dialog"、aria-modal="true"属性，管理焦点在弹框内循环。

处理ESC键关闭：

useEffect(() => {
  const handleKeyDown = (e) => {
    if (e.key === 'Escape') onClose();
  };
  if (isOpen) window.addEventListener('keydown', handleKeyDown);
  return () => window.removeEventListener('keydown', handleKeyDown);
}, [isOpen, onClose]);

禁用背景滚动：

useEffect(() => {
  if (isOpen) document.body.style.overflow = 'hidden';
  else document.body.style.overflow = '';
  return () => { document.body.style.overflow = ''; };
}, [isOpen]);

标签: react