React中多模态框的优化处理及多框同时打开实现方案咨询

嘿，我太懂你这种重复写一堆state和处理函数的痛苦了——多个模态框这么写不仅代码冗余，后续加新模态框还要复制粘贴，维护起来真的麻烦！我来给你分享几个靠谱的优化思路，应该能解决你的问题，而且适配Material UI的Dialog组件完全没问题~

方案一：单State管理（适合同一时间只打开一个模态框的场景） #

如果你的业务不需要同时打开多个模态框，那可以用一个State来记录当前激活的模态框ID，代替多个布尔值State：

import { useState } from 'react';
import Dialog from '@mui/material/Dialog';

// 用单个state存当前打开的模态框id，初始为null表示都关闭
const [activeModal, setActiveModal] = useState(null);

// 统一的模态框切换函数，传入对应的模态框id即可
const toggleModal = (modalId) => {
  // 如果点击的是当前打开的模态框，就关闭；否则打开它
  setActiveModal(prev => prev === modalId ? null : modalId);
};

// 调用示例（以你原来的modal3为例）
<li>
  23.02.1 (09/01/2023)
  <button className="btn-modal" onClick={() => toggleModal('modal3')}>
    <span>open</span>
  </button>
  <Dialog
    open={activeModal === 'modal3'} // 判断当前模态框是否激活
    onClose={() => toggleModal('modal3')} // 关闭时调用切换函数
    aria-labelledby="responsive-dialog-title"
    id="dialog"
  >
    <ModalContainer id="container-modal">
      <div className="div-btn">
        <iframe
          title="modal3"
          className="frame"
          src={vers3}
          allowfullscreen={true}
        ></iframe>
      </div>
    </ModalContainer>
  </Dialog>
</li>

这样不管你加多少个模态框，只需要给每个模态框分配唯一ID，复用同一个toggleModal函数就行，再也不用写重复的handleModalX啦！

方案二：对象State管理（支持同时打开多个模态框） #

如果你的业务需要同时打开多个模态框，那可以用一个对象State来管理所有模态框的状态：

import { useState } from 'react';
import Dialog from '@mui/material/Dialog';

// 用对象存所有模态框的打开状态，key是模态框id，value是布尔值
const [modalStates, setModalStates] = useState({
  modal1: false,
  modal2: false,
  modal3: false
});

// 统一的切换函数，通过修改对象对应key的值来控制状态
const toggleModal = (modalId) => {
  setModalStates(prev => ({
    ...prev, // 保留其他模态框的状态
    [modalId]: !prev[modalId] // 切换当前点击的模态框状态
  }));
};

// 调用示例（同样以modal3为例）
<li>
  23.02.1 (09/01/2023)
  <button className="btn-modal" onClick={() => toggleModal('modal3')}>
    <span>open</span>
  </button>
  <Dialog
    open={modalStates.modal3} // 直接取对象中对应的状态
    onClose={() => toggleModal('modal3')}
    aria-labelledby="responsive-dialog-title"
    id="dialog"
  >
    <ModalContainer id="container-modal">
      <div className="div-btn">
        <iframe
          title="modal3"
          className="frame"
          src={vers3}
          allowfullscreen={true}
        ></iframe>
      </div>
    </ModalContainer>
  </Dialog>
</li>

这种方式完美支持多模态框同时打开，后续新增模态框只需要在初始的modalStates对象里加个新key就行，非常灵活。

关于你提到的Material UI组件没生效的问题 #

你之前用MUI没成功，大概率是状态绑定或者函数传递的问题——比如没有正确给每个Dialog的open属性绑定对应的状态，或者onClose没有调用正确的切换函数。按照上面的方案来写，完全适配MUI的Dialog组件，应该就能解决啦！

备注：内容来源于stack exchange，提问作者PAOLA SANTOS