javascript - 从 React 中的 e.currentTarget 向上移动 DOM 树时，parentNode 为空

Question

我们正在使用 React 并且有类似的代码:

const isDescendant = (predicateFn, child) => {
  let node = child.parentNode;

  while (node !== null) {
    if (predicateFn(node)) return true;
    node = node.parentNode;
  }

  return false;
}

componentDidMount() {
  const nodeIsModal = () => // ...

  const onBodyClick = (e) => {
    if (isDescendant(nodeIsModal, e.currentTarget)) {
      this.tryToClose();
    }
  };
  document.addEventListener('click', onBodyClick);
}

这似乎可行，但是当我们单击 DOM 中的一些 元素时，isDescendant 开始从 e.currentTarget 开始沿着 DOM 树向上移动它突然停止，因为 node.parentNode 返回 null。问题是，当点击“检查元素”时，我们清楚地看到该节点位于 DOM 树的中间，并且显然有一个父节点。看起来从 e.currentTarget 返回的节点(或其祖先)以某种方式与真实的 DOM 树分离。

是 React 在这里做了什么导致了这种行为，还是我们在用其他方式欺骗自己？

Answer 1

可以通过下面的方式解决document.body.addEventListener('click', onBodyClick)。我遇到了同样的问题，但现在它对我来说很好用。