React中使用Tailwind和HeadlessUI时如何关闭子模态框不关闭父模态框

问题根因 #

你遇到的嵌套模态框同步关闭问题由两个原因导致：

• 父子模态框使用了相同的z-index层级，子模态框渲染后会被父模态框判定为外部点击区域，触发父模态框的onClose回调
• 父模态框的关闭逻辑没有判断子模态框的打开状态，只要触发onClose就会直接关闭

修复方案 #

1. 调高子模态框的层级，确保高于父模态框
   父模态框的Dialog保持z-10，将子模态框的Dialog层级改为z-20，避免子模态框被识别为父模态框的外部区域：

// 子模态框代码修改
<Dialog as="div" className="fixed inset-0 z-20 overflow-y-auto" onClose={closeChildModal}>

2. 给父模态框的关闭逻辑增加子模态框状态判断
   父模态框触发onClose回调时，先判断子模态框是否处于打开状态，如果是就终止关闭逻辑：

// 父模态框代码修改
function closeModal() {
  // 子模态框打开时不执行父模态框关闭操作
  if (childIsOpen) return
  setIsOpen(false)
}

修改完成后即可实现预期效果：点击子模态框关闭按钮仅关闭子模态框，ESC按键也会按层级顺序先关闭子模态框，再次按下才会关闭父模态框。

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