当前位置：首页 > React

react中实现弹出框

2026-01-27 12:34:56React

使用 React Portal 实现弹出框

React Portal 允许将子节点渲染到 DOM 树中的不同位置，适合实现模态框或弹出层。通过 ReactDOM.createPortal 将内容挂载到 body 或其他容器。

import ReactDOM from 'react-dom';

const Modal = ({ children }) => {
  return ReactDOM.createPortal(
    <div className="modal-overlay">
      <div className="modal-content">{children}</div>
    </div>,
    document.body
  );
};

样式需固定定位覆盖全屏：

react中实现弹出框

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
}

控制弹出框显示状态

通过 React 状态管理弹出框的显隐。使用 useState 定义状态变量和切换函数。

import { useState } from 'react';

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

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>打开弹出框</button>
      {isOpen && (
        <Modal onClose={() => setIsOpen(false)}>
          <h2>标题</h2>
          <p>内容...</p>
        </Modal>
      )}
    </div>
  );
};

添加动画效果

结合 CSS 过渡或动画库（如 Framer Motion）实现平滑效果。以下示例使用 CSS 动画：

react中实现弹出框

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
.modal-content {
  animation: fadeIn 0.3s ease-out;
}

处理外部点击关闭

监听模态框外部点击事件，点击 overlay 时关闭弹出框。

const Modal = ({ children, onClose }) => {
  const handleOverlayClick = (e) => {
    if (e.target === e.currentTarget) onClose();
  };

  return ReactDOM.createPortal(
    <div className="modal-overlay" onClick={handleOverlayClick}>
      <div className="modal-content">{children}</div>
    </div>,
    document.body
  );
};

使用第三方库简化实现

现有库如 react-modal 或 @mui/material 提供封装好的组件：

import Modal from '@mui/material/Modal';

<Modal open={isOpen} onClose={() => setIsOpen(false)}>
  <div className="modal-content">{children}</div>
</Modal>