当前位置：首页 > React

react实现模态框

2026-01-26 19:23:48React

使用 React 创建模态框

在 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 className="close" onClick={() => setIsOpen(false)}>&times;</span>
            <p>这里是模态框的内容</p>
          </div>
        </div>
      )}
    </div>
  );
}

export default ModalExample;

使用 CSS 样式

为模态框添加样式，确保其居中显示并覆盖其他内容。

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

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  width: 50%;
}

.close {
  float: right;
  cursor: pointer;
}

使用第三方库

可以使用现成的 React 模态框库，如 react-modal，简化实现过程。

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

Modal.setAppElement('#root');

function ReactModalExample() {
  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>
  );
}

export default ReactModalExample;

添加动画效果

通过 CSS 过渡或动画库（如 react-transition-group）为模态框添加动画效果。

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';

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

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>打开模态框</button>
      <CSSTransition
        in={isOpen}
        timeout={300}
        classNames="modal"
        unmountOnExit
      >
        <div className="modal">
          <div className="modal-content">
            <span className="close" onClick={() => setIsOpen(false)}>&times;</span>
            <p>带有动画的模态框</p>
          </div>
        </div>
      </CSSTransition>
    </div>
  );
}

export default AnimatedModal;

模态框内容动态渲染

通过传递 children 或 props 动态渲染模态框内容。

function DynamicModal({ isOpen, onClose, children }) {
  if (!isOpen) return null;

  return (
    <div className="modal">
      <div className="modal-content">
        <span className="close" onClick={onClose}>&times;</span>
        {children}
      </div>
    </div>
  );
}

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

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>打开模态框</button>
      <DynamicModal isOpen={isOpen} onClose={() => setIsOpen(false)}>
        <p>动态内容</p>
      </DynamicModal>
    </div>
  );
}

以上方法可以根据具体需求选择使用，灵活调整样式和功能。

react实现模态框