当前位置：首页 > React

react hook 实现弹框

2026-01-27 09:51:32React

React Hook 实现弹框的方法

使用 React Hook 可以更简洁地实现弹框功能。以下是几种常见的实现方式：

使用 useState 控制弹框显隐

通过 useState 管理弹框的显示和隐藏状态。

import { useState } from 'react';

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

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>打开弹框</button>
      {isOpen && (
        <div className="modal">
          <div className="modal-content">
            <span onClick={() => setIsOpen(false)}>×</span>
            <p>弹框内容</p>
          </div>
        </div>
      )}
    </div>
  );
}

使用 useReducer 管理复杂状态

如果弹框状态较复杂，可以使用 useReducer 管理。

import { useReducer } from 'react';

function modalReducer(state, action) {
  switch (action.type) {
    case 'OPEN':
      return { ...state, isOpen: true };
    case 'CLOSE':
      return { ...state, isOpen: false };
    default:
      return state;
  }
}

function Modal() {
  const [state, dispatch] = useReducer(modalReducer, { isOpen: false });

  return (
    <div>
      <button onClick={() => dispatch({ type: 'OPEN' })}>打开弹框</button>
      {state.isOpen && (
        <div className="modal">
          <div className="modal-content">
            <span onClick={() => dispatch({ type: 'CLOSE' })}>×</span>
            <p>弹框内容</p>
          </div>
        </div>
      )}
    </div>
  );
}

自定义 Hook 封装弹框逻辑

将弹框逻辑封装成自定义 Hook，方便复用。

import { useState } from 'react';

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

  const openModal = () => setIsOpen(true);
  const closeModal = () => setIsOpen(false);

  return { isOpen, openModal, closeModal };
}

function Modal() {
  const { isOpen, openModal, closeModal } = useModal();

  return (
    <div>
      <button onClick={openModal}>打开弹框</button>
      {isOpen && (
        <div className="modal">
          <div className="modal-content">
            <span onClick={closeModal}>×</span>
            <p>弹框内容</p>
          </div>
        </div>
      )}
    </div>
  );
}

使用第三方库

如果需要更丰富的功能，可以使用第三方库如 react-modal。

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

Modal.setAppElement('#root');

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

弹框样式示例

为弹框添加基本样式，使其居中显示并带有半透明背景。

react hook 实现弹框

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

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

.modal-content span {
  float: right;
  cursor: pointer;
  font-size: 20px;
}