查找动态生成的子节点(React)

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来手动设置它们并通过转发的refs传递它。任何能为我指明正确方向的东西都将不胜感激。

Answer 1

您可以通过为弹出组件呈现内部和外部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()
}