当前位置：首页 > React

react模态框封装之后如何引用

2026-01-25 18:02:00React

封装模态框的基本结构

封装一个React模态框通常需要创建一个可复用的组件，包含状态管理、样式和交互逻辑。以下是一个基础封装示例：

import React, { useState } from 'react';

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

  return (
    <div className="modal-overlay">
      <div className="modal-content">
        <button onClick={onClose}>关闭</button>
        {children}
      </div>
    </div>
  );
};

export default Modal;

在父组件中引用模态框

状态管理：父组件通过useState控制模态框的显示/隐藏。
传递回调函数：将关闭模态框的方法通过props传递给子组件。

import React, { useState } from 'react';
import Modal from './Modal';

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

  return (
    <div>
      <button onClick={() => setIsModalOpen(true)}>打开模态框</button>
      <Modal 
        isOpen={isModalOpen} 
        onClose={() => setIsModalOpen(false)}
      >
        <p>这里是模态框内容</p>
      </Modal>
    </div>
  );
};

进阶封装：支持动态内容

通过props传递标题、按钮文本等动态内容，增强复用性：

const Modal = ({ isOpen, onClose, title, children }) => {
  return (
    isOpen && (
      <div className="modal-overlay">
        <div className="modal-content">
          <h3>{title}</h3>
          {children}
          <button onClick={onClose}>关闭</button>
        </div>
      </div>
    )
  );
};

// 父组件中使用
<Modal 
  isOpen={isModalOpen}
  onClose={() => setIsModalOpen(false)}
  title="提示"
>
  <p>自定义内容区域</p>
</Modal>

使用Context全局管理模态框

对于复杂应用，可通过React Context实现全局模态框控制：

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

const ModalContext = createContext();

export 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 && (
        <Modal onClose={closeModal}>{modalContent}</Modal>
      )}
    </ModalContext.Provider>
  );
};

// 在任意子组件中调用
const { openModal } = useContext(ModalContext);
openModal(<div>全局模态框内容</div>);