javascript - 如何确定组件是否包含 React 层次结构

Question

我创建了一个弹出库，它使用 React Portal 将每个弹出窗口呈现到 body 以缓解 overflow: hidden 问题。现在弹出窗口可以打开更多弹出窗口，我想确定是否在这些弹出窗口层次结构之外进行了单击，以便关闭所有弹出窗口。如果它们是嵌套的，我可以为 e.target 做一个 .contains，但在这里，DOM 层次结构将是扁平的(即，所有弹出窗口都是 body 内的兄弟) .由于 React 门户的性质，只有 React 层次结构会嵌套。我的问题是如何最好地检测点击是在此弹出层次结构内部还是外部进行？

Answer 1

我最终使用 react 上下文将弹出窗口的关闭功能向下发送给它的 child 。 children ，如果他们自己弹出，可以调用它自己的关闭函数，然后通过调用父关闭函数委托(delegate)进一步传播。