当前位置：首页 > React

react弹窗组件实现

2026-01-26 18:39:10React

实现 React 弹窗组件的方法

使用 React 内置 Portal 实现弹窗

Portal 允许将子节点渲染到父组件 DOM 层级之外的 DOM 节点，适合实现模态框或弹窗。

关键代码示例：

import ReactDOM from 'react-dom';

function Modal({ children }) {
  return ReactDOM.createPortal(
    <div className="modal-overlay">
      <div className="modal-content">{children}</div>
    </div>,
    document.getElementById('modal-root') // 需在 HTML 中预先定义此节点
  );
}

使用方式：

function App() {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <div>
      <button onClick={() => setIsOpen(true)}>打开弹窗</button>
      {isOpen && (
        <Modal>
          <p>弹窗内容</p>
          <button onClick={() => setIsOpen(false)}>关闭</button>
        </Modal>
      )}
    </div>
  );
}

通过 CSS 控制弹窗动画

通过 CSS 过渡或动画实现弹窗的淡入淡出效果。

CSS 示例：

react弹窗组件实现

.modal-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;
}

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

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  transform: translateY(-20px);
  transition: transform 0.3s ease;
}

.modal-overlay.active .modal-content {
  transform: translateY(0);
}

组件调整：

function Modal({ children, isOpen }) {
  return ReactDOM.createPortal(
    <div className={`modal-overlay ${isOpen ? 'active' : ''}`}>
      <div className="modal-content">{children}</div>
    </div>,
    document.getElementById('modal-root')
  );
}

使用第三方库（如 React Modal）

对于复杂需求，可直接使用现成库简化开发。

安装与示例：

react弹窗组件实现

npm install react-modal

import ReactModal from 'react-modal';

function App() {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <div>
      <button onClick={() => setIsOpen(true)}>打开弹窗</button>
      <ReactModal
        isOpen={isOpen}
        onRequestClose={() => setIsOpen(false)}
        contentLabel="示例弹窗"
      >
        <p>弹窗内容</p>
        <button onClick={() => setIsOpen(false)}>关闭</button>
      </ReactModal>
    </div>
  );
}

自定义 Hook 管理弹窗状态

通过自定义 Hook 封装弹窗逻辑，提升复用性。

Hook 示例：

function useModal() {
  const [isOpen, setIsOpen] = useState(false);
  const open = () => setIsOpen(true);
  const close = () => setIsOpen(false);
  return { isOpen, open, close };
}

使用方式：

function App() {
  const { isOpen, open, close } = useModal();
  return (
    <div>
      <button onClick={open}>打开弹窗</button>
      <Modal isOpen={isOpen} onClose={close}>
        <p>弹窗内容</p>
      </Modal>
    </div>
  );
}