当前位置：首页 > React

react如何弹出框

2026-02-12 06:39:07React

使用 React 创建弹出框的方法

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

通过 React 的 useState 钩子管理弹出框的显示状态，结合条件渲染实现弹出框的显示与隐藏。

import React, { useState } from 'react';

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

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

方法二：使用第三方库（如 React Modal）

React Modal 是一个流行的库，提供更丰富的功能和更好的可访问性。

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

Modal.setAppElement('#root'); // 设置根元素以支持可访问性

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

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

方法三：使用 Portal 实现

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

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

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

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>打开弹出框</button>
      {isOpen &&
        ReactDOM.createPortal(
          <div className="popup">
            <div className="popup-content">
              <h3>弹出框标题</h3>
              <p>这里是弹出框内容</p>
              <button onClick={() => setIsOpen(false)}>关闭</button>
            </div>
          </div>,
          document.body
        )}
    </div>
  );
}

样式建议

为弹出框添加基础样式以提升用户体验：

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-content {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  max-width: 500px;
  width: 100%;
}