当前位置：首页 > React

react如何做弹窗

2026-03-10 19:25:00React

使用 React 创建弹窗的方法

方法一：使用 React 内置状态管理

创建一个简单的弹窗组件，通过 useState 控制显示与隐藏：

import React, { useState } from 'react';

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

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

添加基础 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;
}

.popup-content {
  background: white;
  padding: 20px;
  border-radius: 5px;
}

方法二：使用 Portal 实现

react如何做弹窗

对于更复杂的弹窗，建议使用 ReactDOM.createPortal 确保弹窗位于 DOM 顶层：

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

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

  return ReactDOM.createPortal(
    <div className="popup-overlay">
      <div className="popup-content">
        {children}
        <button onClick={onClose}>关闭</button>
      </div>
    </div>,
    document.body
  );
}

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

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>打开弹窗</button>
      <PortalPopup isOpen={isOpen} onClose={() => setIsOpen(false)}>
        <h2>Portal 弹窗</h2>
        <p>内容</p>
      </PortalPopup>
    </div>
  );
}

方法三：使用第三方库

react如何做弹窗

常用弹窗库推荐：

react-modal: 功能全面的弹窗解决方案
@mui/material 的 Dialog 组件: Material UI 的弹窗实现
react-portal: 专注于 Portal 功能的轻量级方案

以 react-modal 为例：

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

Modal.setAppElement('#root'); // 防止屏幕阅读器报错

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

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

最佳实践建议