React.js中两层嵌套Modal打开时点击外部如何直接返回主页面

核心逻辑很简单：把所有层级模态框的显隐状态统一收口管理，禁用模态框组件默认的分层遮罩点击关闭逻辑，自行判断当前打开的最高层级模态框，触发遮罩点击时按需求批量重置状态。

原生JS + Bootstrap 实现 #

• 先给两个模态框都添加data-bs-backdrop="static"属性，禁用Bootstrap默认的点击遮罩自动关闭当前模态框的行为，避免自带逻辑和自定义逻辑冲突。
• 在公共作用域维护两层模态框的显隐状态，比如：

const modalVisible = {
  first: false,
  second: false
}
// 打开第一层时把modalVisible.first设为true，打开第二层时把modalVisible.second设为true

• 全局绑定点击事件，判断点击目标为模态框遮罩时，执行自定义关闭逻辑：

document.addEventListener('click', (e) => {
  // Bootstrap模态框根元素点击时，若目标不是内部内容即为点击遮罩
  if (e.target.classList.contains('modal')) {
    // 第二层处于打开状态时，直接隐藏两层模态框，重置所有状态
    if (modalVisible.second) {
      bootstrap.Modal.getInstance('#secondModal').hide()
      bootstrap.Modal.getInstance('#firstModal').hide()
      modalVisible.first = false
      modalVisible.second = false
      return
    }
    // 仅第一层打开时，只关闭第一层
    if (modalVisible.first) {
      bootstrap.Modal.getInstance('#firstModal').hide()
      modalVisible.first = false
    }
  }
})

• 注意保证第二层模态框的z-index高于第一层，确保第二层打开时用户能点击到的遮罩只有最上层的，不会误触第一层的遮罩事件。

React 实现 #

• 不要把各层模态框的显隐状态拆分到各自组件内部维护，统一放到两层模态框的公共父组件中管理，状态定义参考：

const [modalStatus, setModalStatus] = useState({
  firstLayerOpen: false,
  secondLayerOpen: false
})

• 关闭所用UI组件库（AntD、MUI、React Bootstrap等）自带的maskClosable默认遮罩关闭能力，自行给模态框根节点绑定遮罩点击处理函数：

const handleMaskClick = (e) => {
  // 排除点击模态框内部内容触发的冒泡事件
  if (e.target !== e.currentTarget) return
  if (modalStatus.secondLayerOpen) {
    // 第二层打开时，直接重置所有模态框状态为关闭
    setModalStatus({
      firstLayerOpen: false,
      secondLayerOpen: false
    })
    return
  }
  if (modalStatus.firstLayerOpen) {
    // 仅第一层打开时，只关闭第一层
    setModalStatus(prev => ({...prev, firstLayerOpen: false}))
  }
}

• 如果后续要扩展更多层级的模态框，可以把状态改成栈结构：每打开一层模态框就往栈里push一个层级标识，点击遮罩时判断栈长度，长度大于1直接清空栈关闭所有模态框，长度为1则弹出栈顶关闭当前层，不需要针对每个层级写单独判断。

常见坑点：不要给第二层模态框绑定“关闭后自动显示第一层”的回调逻辑，这种强耦合的写法是导致关完第二层停留在第一层的常见原因，所有模态框的显隐只能由统一维护的状态驱动，不要在单模态框的生命周期回调里私自修改其他层级的显隐状态。

内容的提问来源于stack exchange，提问作者beginner_coder