如何在React-Bootstrap中打开子Modal时隐藏父Modal且不触发子Modal关闭

该问题是事件冒泡以及Modal组件的默认挂载逻辑导致的：点击父Modal内打开子Modal的元素时，点击事件会向上冒泡触发父Modal的关闭监听，同时父Modal销毁时也会连带触发子Modal的绑定事件。目前已实现的叠加效果如下：

可通过以下任意方案解决：

• 方案1：阻止点击事件冒泡
  在打开子Modal的点击事件回调中调用e.stopPropagation()，阻断事件向上传递到父Modal的关闭监听逻辑。代码示例：

// 父Modal内打开子Modal的按钮点击回调
const openChildModal = (e) => {
  e.stopPropagation()
  setShowParent(false)
  setShowChild(true)
}

• 方案2：指定子Modal的挂载容器
  给子Modal添加container属性，将其挂载到父Modal所属DOM节点之外（比如根节点或者document.body），避免父子Modal的事件绑定在同一个DOM层级互相影响。代码示例：

<Modal
  show={showChild}
  onHide={() => setShowChild(false)}
  container={document.body} // 关键配置
>
  {/* 子Modal内容 */}
</Modal>

• 方案3：异步延迟关闭父Modal
  调整状态更新顺序，先渲染打开子Modal，等子Modal完全挂载后再关闭父Modal，避免父Modal销毁时连带触发子Modal的关闭事件。代码示例：

const openChildModal = () => {
  setShowChild(true)
  // 延迟100ms关闭父Modal，确保子Modal挂载完成
  setTimeout(() => setShowParent(false), 100)
}

• 方案4：隐藏而非卸载父Modal
  如果不想调整事件逻辑，可以不用修改父Modal的show状态，而是通过CSS隐藏父Modal，等子Modal关闭后再恢复父Modal的显示或者直接销毁。代码示例：

<Modal
  show={showParent}
  className={showChild ? 'd-none' : ''} // React-Bootstrap内置d-none类对应display:none
  onHide={() => setShowParent(false)}
>
  {/* 父Modal内容 */}
</Modal>

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