当前位置：首页 > React

react实现弹窗用

2026-01-26 21:57:20React

使用 React 创建弹窗的几种方法

使用 React 内置状态管理

通过 useState 控制弹窗的显示与隐藏，结合条件渲染实现弹窗效果。

import { useState } from 'react';

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

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

使用 Portal 实现

通过 ReactDOM.createPortal 将弹窗渲染到 DOM 树的特定位置，避免样式冲突。

import { useState } from 'react';
import ReactDOM from 'react-dom';

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

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Portal 弹窗</button>
      {isOpen &&
        ReactDOM.createPortal(
          <div className="modal">
            <div className="modal-content">
              <span onClick={() => setIsOpen(false)}>&times;</span>
              <p>通过 Portal 渲染的内容</p>
            </div>
          </div>,
          document.body
        )}
    </>
  );
}

使用第三方库

推荐使用成熟的弹窗组件库如 react-modal 或 @mui/material 的 Dialog 组件。

安装 react-modal：

npm install react-modal

示例代码：

import ReactModal from 'react-modal';
import { useState } from 'react';

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

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>使用 react-modal</button>
      <ReactModal
        isOpen={isOpen}
        onRequestClose={() => setIsOpen(false)}
        contentLabel="示例弹窗"
      >
        <h2>react-modal 弹窗</h2>
        <p>提供无障碍支持等完善功能</p>
        <button onClick={() => setIsOpen(false)}>关闭</button>
      </ReactModal>
    </div>
  );
}

动画效果实现

为弹窗添加 CSS 过渡动画增强用户体验。

/* CSS 动画示例 */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.popup-overlay.active {
  opacity: 1;
}

.popup-content {
  background: white;
  padding: 20px;
  border-radius: 5px;
  transform: scale(0.8);
  transition: transform 0.3s ease;
}

.popup-overlay.active .popup-content {
  transform: scale(1);
}