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树时，它会突然停止，因为{{1} }返回node.parentNode。问题是，当点击“检查元素”时，我们清楚地看到节点位于DOM树的中间，并且显然有一个父节点。看起来从null返回的节点（或它的祖先）在某种程度上与真正的DOM树分离。

反应在这里做了什么导致了这种行为，还是我们在其他方面欺骗了？

Answer 1

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

从React中的e.currentTarget向上走DOM-tree时，parentNode为null

1 个答案: