Question

我有一个事件监听器，应该触发onClick，除非您单击导航栏/导航栏中的一个项目。通常，我会这样处理：

document.addEventListener('mousedown', this.handleOutsideClick);

handleOutsideClick = e => {
  if(!this.navREF.current.contains(e.target)){
    //do my stuff
  }
}

问题在于，导航与具有这种逻辑的组件相距甚远，我真的不希望将ref传递给10个以上的组件。由于findDomNode已被弃用/禁止使用，我想知道是否还有其他方法可以处理此问题。

有没有更快的方法可以通过我的裁判？我正在将redux用于其他数据流。

我最坏的解决方案是为导航中的每个项目添加一个data属性，但是大概有50％的机会使我被解雇。。

编辑：与该主题的其他问题不同，因为外部组件不在我的反应组件的范围内

Answer 1

我没有找到传递引用的方法，所以我改编了this abomination

  checkIfParent = e => {
    let node = e.target;
    while (node) {
      if (node.id && node.id === 'ParentId') {
        return true;
      }
      node = node.parentNode;
    }
    return false;
  };

将裁判转发给非孩子在反应

1 个答案: