react中可全局访问的模态组件

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

const ModalContext = createContext();

const ModalProvider = ({ children }) => {
  const [modalContent, setModalContent] = useState(null);

  const openModal = (content) => {
    setModalContent(content);
  };

  const closeModal = () => {
    setModalContent(null);
  };

  return (
    <ModalContext.Provider value={{ openModal, closeModal }}>
      {children}
      {modalContent}
    </ModalContext.Provider>
  );
};

import React from 'react';
import { ModalProvider } from './ModalContext';
import ModalComponent from './ModalComponent';

const App = () => {
  return (
    <ModalProvider>
      <div>
        {/* 应用的其他组件 */}
        <ModalComponent />
      </div>
    </ModalProvider>
  );
};

export default App;

import React, { useContext } from 'react';
import { ModalContext } from './ModalContext';

const ModalComponent = () => {
  const { openModal } = useContext(ModalContext);

  const handleOpenModal = () => {
    const modalContent = (
      <div>
        {/* 模态组件的内容 */}
      </div>
    );
    openModal(modalContent);
  };

  return (
    <div>
      <button onClick={handleOpenModal}>打开模态组件</button>
    </div>
  );
};

export default ModalComponent;