当前位置：首页 > React

react实现全局弹窗

2026-01-27 09:12:41React

实现全局弹窗的几种方法

使用React Context和自定义Hook

创建Context和Provider管理弹窗状态：

import React, { createContext, useContext, useState } from 'react';

const ModalContext = createContext();

export const ModalProvider = ({ children }) => {
  const [modal, setModal] = useState(null);

  const showModal = (content) => setModal(content);
  const hideModal = () => setModal(null);

  return (
    <ModalContext.Provider value={{ showModal, hideModal }}>
      {children}
      {modal && (
        <div className="global-modal">
          <div className="modal-content">{modal}</div>
        </div>
      )}
    </ModalContext.Provider>
  );
};

export const useModal = () => useContext(ModalContext);

在根组件包裹Provider：

import { ModalProvider } from './ModalContext';

function App() {
  return (
    <ModalProvider>
      {/* 其他组件 */}
    </ModalProvider>
  );
}

组件中使用：

import { useModal } from './ModalContext';

function MyComponent() {
  const { showModal } = useModal();

  return (
    <button onClick={() => showModal(<div>弹窗内容</div>)}>
      打开弹窗
    </button>
  );
}

使用第三方状态管理库（如Redux）

创建Redux slice管理弹窗状态：

import { createSlice } from '@reduxjs/toolkit';

const modalSlice = createSlice({
  name: 'modal',
  initialState: null,
  reducers: {
    show: (state, action) => action.payload,
    hide: () => null
  }
});

export const { show, hide } = modalSlice.actions;
export default modalSlice.reducer;

创建全局Modal组件：

import { useSelector, useDispatch } from 'react-redux';
import { hide } from './modalSlice';

export function GlobalModal() {
  const content = useSelector(state => state.modal);
  const dispatch = useDispatch();

  if (!content) return null;

  return (
    <div className="modal-overlay" onClick={() => dispatch(hide())}>
      <div className="modal-content" onClick={e => e.stopPropagation()}>
        {content}
      </div>
    </div>
  );
}

在组件中触发：

import { useDispatch } from 'react-redux';
import { show } from './modalSlice';

function MyComponent() {
  const dispatch = useDispatch();

  const openModal = () => dispatch(show(<div>弹窗内容</div>));

  return <button onClick={openModal}>打开弹窗</button>;
}

使用Portal实现层级控制

创建Portal组件：

import ReactDOM from 'react-dom';

const ModalPortal = ({ children }) => {
  const modalRoot = document.getElementById('modal-root');
  return ReactDOM.createPortal(children, modalRoot);
};

export default ModalPortal;

在HTML中添加容器节点：

<div id="root"></div>
<div id="modal-root"></div>

结合Context使用：

const Modal = ({ children }) => (
  <ModalPortal>
    <div className="modal">
      {children}
    </div>
  </ModalPortal>
);

样式处理建议

添加基础CSS样式确保弹窗可见性：

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

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  max-width: 80%;
  max-height: 80vh;
  overflow: auto;
}

动画效果实现

使用CSS transitions或动画库：

.modal-content {
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

或使用React Transition Group：

react实现全局弹窗

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

<CSSTransition
  in={Boolean(modal)}
  timeout={300}
  classNames="modal"
  unmountOnExit
>
  <div className="modal">{modal}</div>
</CSSTransition>