当前位置：首页 > React

react 如何弹窗

2026-02-11 13:21:52React

在 React 中实现弹窗的几种方法

使用 React 内置的状态管理 通过 React 的 useState 钩子控制弹窗的显示与隐藏，结合条件渲染实现弹窗效果。

import React, { useState } from 'react';

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

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>打开弹窗</button>
      {isOpen && (
        <div className="modal">
          <div className="modal-content">
            <span onClick={() => setIsOpen(false)}>&times;</span>
            <p>弹窗内容</p>
          </div>
        </div>
      )}
    </div>
  );
}

使用第三方库（如 React Modal） 安装 react-modal 库可以快速实现标准化弹窗，支持无障碍访问和自定义样式。

npm install react-modal

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>
  );
}

使用 Portal 实现脱离 DOM 层级的弹窗 通过 ReactDOM.createPortal 将弹窗渲染到 body 或其他指定容器，避免父组件样式影响。

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

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

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

样式建议 为弹窗添加基础 CSS 确保居中显示和背景遮罩：

react 如何弹窗

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 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;
}

标签: react