处理嵌套弹出窗口中的事件冒泡（门户）语义用户界面

Question

想象以下设置

<Popup closeOnDocumentClick={true}>
    <Popup><button onClick={e=> e.stopPropagation()}>Click Me!</button></Popup>
</Popup>

点击内部弹出窗口算作一次文档点击，因此关闭第一个弹出窗口。这是因为即使它们在逻辑上嵌套在 React Virtual DOM 中，在呈现的页面上它们也是平行的div(s)

我们如何防止这种行为？即防止对内部弹出窗口的点击被视为外部弹出窗口关闭点击？

解决方案1

closeOnDocumentClick如果内部弹出窗口打开，则有条件地关闭

我不喜欢这个解决方案，因为内部 Popup 可以被抽象为一个组件，我不想创建额外的耦合

解决方案2

我没有解决方案 2