Javascript 在给定组件外部单击React.JS时，如何从组件内部的元素中删除类？

我试图模拟一种类似于打开模式弹出窗口时单击覆盖的行为。在sidenav组件外部单击时，我希望关闭当前处于

弹出式按钮

模式的所有元素

我有一个多层嵌套导航菜单，它存储在自己的组件中，

侧栏

。我有以下一段代码，用于处理

侧栏

组件外部发生的

单击

：

类侧栏扩展了React.Component{
...
handleClick=（e）=>{
if（this.node.contains（e.target））{
返回；
}
console.log（“外部”）；
};
componentDidMount（）{
window.addEventListener（'mousedown'，this.handleClick，false）；
}
组件将卸载（）{
window.removeEventListener（'mousedown'，this.handleClick，false）；
}
render（）{
返回(
this.node=node}
className=“侧栏”
数据颜色={this.props.bgColor}
数据活动颜色={this.props.activeColor}
>
{renderSideBar（）}
);
}
...
}

这部分工作正常-但当弹出式菜单在单击父菜单选项时显示时，我希望它关闭当前打开的任何弹出式菜单

-|
 |
 - Menu Item 1
  |
  |-option 1 (currently open)
  |-option 2
 - Menu Item 2
  | 
  |-option 1 (closed)
  |-option 2 (closed, clicked to expand - this is when it should close [Menu Item 1/Option 1]

映射包含菜单结构的数据对象时，使用

标记生成菜单项

是否有一种方法可以基本上选择所有注册的对象，这些对象的类为“collapse”/aria expanded=“true”，并将其删除？类似于

jQuery

选择dom元素并操作它们的方式

---

我知道这不是React工作的前提，它只是我想要模拟的行为的一个示例。

据我所知，您想要从另一个组件修改DOM子树。为了实现你的目标，你可以使用

当您想要直接访问时，使用

ref

会很有帮助-在我的示例中，我使用了。请阅读，因为它描述了更多的

ref

用例

下面是用户单击

时收缩的简单示例

const{useRef}=React；
函数Main（）{
const边栏=useRef（null）；
常量handleClick=（）=>{
sidebar.current.hide（）；
};
返回(
);
}
类侧栏扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={visible:true}；
this.show=this.show.bind（this）；
this.sidebar=React.createRef（null）；
}
show（）{
如果（！this.state.visible）{
this.sidebar.current.animate(
{flex:[1,2]，“背景色”：[“青色”、“红色”]}，
300
);
this.setState（{visible:true}）；
}
}
隐藏（）{
if（this.state.visible）{
this.sidebar.current.animate(
{flex:[2,1]，“背景色”：[“红色”，“青色]}，
300
);
this.setState（{visible:false}）；
}
}
render（）{
返回(
边栏
);
}
}
函数内容（{onClick}）{
返回(
内容
);
}
render（，document.getElementById（“根”））
.main{
显示器：flex；
高度：100vh；
}
.侧边栏{
弹性：1；
背景色：青色；
}
.侧栏--可见{
弹性：2；
背景色：红色；
}
.内容{
弹性：7；
背景颜色：米色；
}

什么是弹出式菜单？它可能是
侧栏
组件的子代。您是否尝试将道具值向下传递到菜单项以关闭？请检查此示例是否有帮助：。它用于关闭子元素。@macborowy您可以将此作为答案提交吗？它能够帮助我解决这个问题！