如何确定组件是否包含 React 层次结构
How to determine if a component comprises a React heirarchy
我创建了一个弹出库，它使用 React Portal 将每个弹出窗口渲染到 body 以缓解 overflow: hidden 问题。现在弹出窗口可以打开更多弹出窗口，我想确定是否在这些弹出窗口层次结构之外进行了单击，以便关闭所有弹出窗口。如果它们是嵌套的，我可以为 e.target 做一个 .contains，但在这里，DOM 层次结构将是扁平的（即，所有弹出窗口都是 body 内的兄弟）。由于 React 门户的性质，只有 React 层次结构会嵌套。我的问题是如何最好地检测点击是在此弹出层级内部还是外部进行？
我最终使用反应上下文将弹出窗口的关闭功能发送到它的 children。 children，如果它们自己弹出，可以调用它自己的关闭函数，然后通过调用 parent 关闭函数委托进一步传播。
在检测反应子树之外的点击时遇到了同样的问题。
您所需要的只是在 DOM 元素上设置处理程序，呈现在门户上。另一个处理程序应该添加到文档中。因此，您可以在事件冒泡到文档之前使用处理程序“标记”事件。
为此类情况编写包：
https://www.npmjs.com/package/react-on-outside-event
我创建了一个弹出库，它使用 React Portal 将每个弹出窗口渲染到 body 以缓解 overflow: hidden 问题。现在弹出窗口可以打开更多弹出窗口，我想确定是否在这些弹出窗口层次结构之外进行了单击，以便关闭所有弹出窗口。如果它们是嵌套的，我可以为 e.target 做一个 .contains，但在这里，DOM 层次结构将是扁平的（即，所有弹出窗口都是 body 内的兄弟）。由于 React 门户的性质，只有 React 层次结构会嵌套。我的问题是如何最好地检测点击是在此弹出层级内部还是外部进行？
我最终使用反应上下文将弹出窗口的关闭功能发送到它的 children。 children，如果它们自己弹出，可以调用它自己的关闭函数，然后通过调用 parent 关闭函数委托进一步传播。
在检测反应子树之外的点击时遇到了同样的问题。 您所需要的只是在 DOM 元素上设置处理程序，呈现在门户上。另一个处理程序应该添加到文档中。因此，您可以在事件冒泡到文档之前使用处理程序“标记”事件。
为此类情况编写包： https://www.npmjs.com/package/react-on-outside-event