当前位置：首页 > React

react modal实现

2026-01-26 16:36:50React

React Modal 的实现方法

在 React 中实现 Modal（模态框）可以通过多种方式完成，以下是几种常见的方法：

使用 React Portal 和 CSS

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

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

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

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

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

  return (
    <div>
      <button onClick={() => setIsModalOpen(true)}>Open Modal</button>
      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
        <h2>Modal Title</h2>
        <p>Modal content goes here.</p>
      </Modal>
    </div>
  );
};

对应的 CSS 样式：

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

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

使用第三方库

许多成熟的 React Modal 库提供了更多功能和更好的可访问性支持：

React Modal

npm install react-modal

示例代码：

import ReactModal from 'react-modal';

ReactModal.setAppElement('#root');

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

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>
      <ReactModal
        isOpen={isOpen}
        onRequestClose={() => setIsOpen(false)}
        contentLabel="Example Modal"
      >
        <h2>Modal Title</h2>
        <p>Modal content</p>
      </ReactModal>
    </div>
  );
};

Chakra UI Modal 如果使用 Chakra UI，它提供了内置的 Modal 组件：

import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalCloseButton } from "@chakra-ui/react";

const App = () => {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <>
      <button onClick={onOpen}>Open Modal</button>
      <Modal isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Modal Title</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            <p>Modal content</p>
          </ModalBody>
        </ModalContent>
      </Modal>
    </>
  );
};

自定义 Hook 实现

可以创建自定义 Hook 来管理 Modal 状态：

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

  const open = () => setIsOpen(true);
  const close = () => setIsOpen(false);

  return { isOpen, open, close };
};

const App = () => {
  const { isOpen, open, close } = useModal();

  return (
    <div>
      <button onClick={open}>Open Modal</button>
      {isOpen && (
        <div className="modal-overlay">
          <div className="modal-content">
            <button onClick={close}>Close</button>
            <h2>Custom Hook Modal</h2>
          </div>
        </div>
      )}
    </div>
  );
};