当前位置：首页 > React

react实现弹出层

2026-01-27 08:06:25React

使用 React 实现弹出层

使用 React Portal 实现模态框

React Portal 允许将子节点渲染到 DOM 节点外的位置，适合实现模态框这类需要脱离当前 DOM 结构的组件。

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

const Modal = ({ children, isOpen, onClose }) => {
  if (!isOpen) return null;

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

const App = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsModalOpen(true)}>打开模态框</button>
      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
        <h2>模态框内容</h2>
        <p>这是一个使用 React Portal 实现的模态框</p>
      </Modal>
    </div>
  );
};

使用 CSS 控制弹出层显示

通过 CSS 的 display 和 visibility 属性控制弹出层的显示与隐藏。

const Popup = ({ isVisible, children }) => {
  return (
    <div style={{
      display: isVisible ? 'block' : 'none',
      position: 'fixed',
      top: '50%',
      left: '50%',
      transform: 'translate(-50%, -50%)',
      zIndex: 1000
    }}>
      {children}
    </div>
  );
};

使用第三方库实现弹出层

react-modal 是一个流行的 React 模态框库，提供了丰富的功能和可定制性。

import ReactModal from 'react-modal';

ReactModal.setAppElement('#root');

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

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>打开模态框</button>
      <ReactModal
        isOpen={isOpen}
        onRequestClose={() => setIsOpen(false)}
        contentLabel="示例模态框"
      >
        <h2>使用 react-modal</h2>
        <p>这是一个第三方库实现的模态框</p>
      </ReactModal>
    </div>
  );
};

动画效果实现

使用 CSS 过渡或动画库为弹出层添加动画效果。

import { CSSTransition } from 'react-transition-group';

const AnimatedModal = ({ isOpen, children }) => {
  return (
    <CSSTransition
      in={isOpen}
      timeout={300}
      classNames="modal"
      unmountOnExit
    >
      <div className="modal">
        {children}
      </div>
    </CSSTransition>
  );
};

对应的 CSS:

react实现弹出层

.modal-enter {
  opacity: 0;
  transform: scale(0.9);
}
.modal-enter-active {
  opacity: 1;
  transform: scale(1);
  transition: opacity 300ms, transform 300ms;
}
.modal-exit {
  opacity: 1;
}
.modal-exit-active {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 300ms, transform 300ms;
}