一个 全局弹窗管理 Provider

使用

• ModalProvider 组件在应用的根组件或需要使用弹窗功能的某个组件上层进行包裹，这样包裹范围内的所有子组件都能访问到弹窗管理功能

• 其他组件可以使用 useModal 钩子来访问 ModalContext，从而调用 openModal 和 closeModal 方法。

• 根据 modalProps传入的内容，灵活的渲染需要打开的弹窗

• 通过这种方式，ModalProvider 提供了一个集中化的、可复用的弹窗管理方案，适合在大型应用中使用。

实现代码

点击 展开/收起 jsx 代码

/**
 * @des 弹窗管理
 */

import React, { createContext, useState, useContext } from 'react';
import LabelBKOverEditModal from 'pages/WarningPart/LabelBKView/LabelBKOverEditModal';

const ModalContext = createContext();

export const ModalProvider = ({ children }) => {
  const [modalProps, setModalProps] = useState({});

  const { modalName } = modalProps;

  const openModal = (props = {}) => {
    setModalProps(props);
  };

  const closeModal = () => {
    setModalProps({});
  };

  return (
    <ModalContext.Provider value={{ modalProps, openModal, closeModal }}>
      {children}
      {modalName === 'labelBkOverEditModal' && (
        <LabelBKOverEditModal {...modalProps} />
      )}
      {modalName === 'labelBkOverNewModal' && (
        <labelBkOverNewModal {...modalProps} />
      )}
      {/** 其他更多的弹窗 */}
    </ModalContext.Provider>
  );
};

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