Javascript 通过映射对多个元素进行反应引用

我有一个代码要捕获，当在外部单击下拉菜单时，它工作正常：

renderTypes() {
    return _.map(this.props.items, (item, index) => {
        return (
                    <div className="ui icon top dropdown" tabIndex="0">
                        <div className={"menu transition" + classe} 
                             tabIndex="-1"
                             ref={node =>  this.node = node }/>
                    </div>
        );
    });
}

componentDidMount() {
    document.addEventListener('mousedown', this.handleClickOutside);
}

componentWillUnmount() {
    document.removeEventListener('mousedown', this.handleClickOutside);
}

handleClickOutside(e){
    const domNode = ReactDOM.findDOMNode(this.node);

    if(!domNode || !domNode.contains(e.target)){
        this.setState({open: ""});
    }
}

renderTypes（）{
return.map（this.props.items，（item，index）=>{
返回(
this.node=node}/>
);
});
}
componentDidMount（）{
document.addEventListener（'mousedown'，this.handleclickout）；
}
组件将卸载（）{
document.removeEventListener（'mousedown'，this.handleclickout）；
}
外把手（e）{
const domNode=ReactDOM.findDOMNode（this.node）；
如果（！domNode | |！domNode.contains（e.target））{
this.setState（{open:'}）；
}
}

但事实上，这只适用于最后一个下拉列表。我很确定这是因为ref没有很好地提供给我的div，我想知道如何在地图上使用它

---

我的代码是正确的还是遗漏了什么？

当您在map中像

ref={node=>this.node=node}

那样分配ref时，相同的ref被覆盖，因此

ref

将只保存最后一个节点的实例。您应该在下拉项周围的包装中添加一个ref

renderTypes() {
    return <div ref={node =>  this.node = node }>{_.map(this.props.items, (item, index) => {
        return (
                    <div className="ui icon top dropdown" tabIndex="0">
                        <div className={"menu transition" + classe} 
                             tabIndex="-1"
                         />
                    </div>
        );
    })}</div>;
}

renderTypes（）{
返回this.node=node}>{{{.map（this.props.items，（item，index）=>{
返回(
);
})};
}