Question

我正在创建一个导航栏/标头，用于显示弹出菜单中的路由，这些弹出菜单又会根据从API接收到的路由权限动态生成。问题是，每当在外部单击时，我都想隐藏一个弹出菜单。目前，我可以这样做，但是我正在做一些反模式来完成它，我想找到一种更好的方法。

componentDidMount() {
  document.addEventListener('mouseup', this.handleClickOutside);
}

componentWillUnmount() {
  document.removeEventListener('mouseup', this.handleClickOutside);
}

handleClickOutside(event) {
  let { focused } = this.state;
  if (event.target.id && event.target.id === 'navbar-link') {
    focused = '';
    this.setState({ focused });
  } else if (focused && !document.getElementById(focused).contains(event.target)) {
      focused = '';
      this.setState({ focused });
    }
  }

问题出在document.getElementById。尽我所能，最好的方法是使用给定弹出菜单的引用来处理它，并将其与事件目标进行比较，以查看其中是否包含另一个。但是，我不知道如何设置或找到对子代的引用，该子代是在父代下游几层动态生成的。

该应用程序当前正在使用React 16.2，因此我无权访问React.createRef来手动设置它们并将其传递给转发的ref。任何指向正确方向的东西都会受到赞赏。

Answer 1

您可以通过为弹出窗口组件渲染内部和外部div，然后停止单击从内部div到外部div的传播，同时在单击外部div时关闭弹出窗口来实现此目的。外部div应该覆盖屏幕的其余部分。通常会添加一些不透明度以使页面的其余部分变暗

const style = {
  position: 'fixed',
  zIndex: 1,
  left: 0,
  top: 0,
  width: '100%',
  height: '100%',
  backgroundColor: 'rgba(0,0,0,0.4)'
}
return (
  <div style={style} onClick={this.props.closePopup}>
      <div onClick={this.innerClick}>
         <Popup/>
      </div>
  </div>
)

innerClick只是其中

innerClick = (e) => {
  e.stopPropagation()
}

查找动态生成的子节点（反应）

1 个答案: