Javascript 如何打开单一菜单？

我正在制作一个引导手风琴来折叠和扩展菜单

在这里，需求已加载，只需打开选中的复选框父按钮

我使用了下面的代码

if(this.props.openMenuId){
       // How to open the ```One``` > ```One-One``` level alone ?
       this.toggle()
    }

但大家都知道，这将使每一个级别和子级别得到开放

根据我的要求，我需要只打开menuId的父级及其子级，并选中复选框值（

One

One

），并关闭其他复选框

为了使复选框基于在

道具中传递的
id
被选中，我使用了以下方法：

const data = document.getElementById(`menuId-${this.props.openMenuId}`)
            data ? data.checked = true : false;

复选框被选中，但要切换相应的菜单，子菜单对我来说很困难

我也给出了纯react代码片段，完全符合我在下面尝试的内容


const-loadMenu=（）=>承诺.解决（[{id:“1”，名字：“1”，孩子：[{id:“1.1”，名字：“1-1-1”}，{id:“1.1.2”，名字：“1-1-2”}，{id:“1.1.3”，名字：“1-1-3”}，{id:“2”，名字：“2”，孩子：[{id:“2.1”，名字：“2-1”}，{id:“4”，名字：“4”，名字：“5”，孩子：[id:{1]名称：“五一”}、{id:“5.2”、名称：“五二”}、{id:“5.3”、名称：“五三”}、{id:“5.4”、名称：“五四”}、{id:“6”、名称：“六”}）；
常量{Component，Fragment}=React；
const{Button，Collapse，Input}=Reactstrap；
类菜单扩展组件{
建造师（道具）{
超级（道具）；
this.state={menuItems:[]}；
}
render（）{
返回；
}
componentDidMount（）{
loadMenu（）.then（menuItems=>this.setState（{menuItems}））；
}
}
功能菜单项容器（道具）{
如果（！props.menuItems.length）返回空值；
const renderMenuItem=menuItem=>
；
return
{props.menuItems.map（renderMenuItem）}
；
}
MenuItemContainer.defaultProps={menuItems:[]}；
类MenuItem扩展组件{
建造师（道具）{
超级（道具）；
this.state={isOpen:false}；
this.toggle=this.toggle.bind（this）；
}
componentDidMount（）{
const data=document.getElementById（`menuId-${this.props.openMenuId}`）
data？data.checked=真：假；
if（this.props.openMenuId）{
//如何单独打开``One``>``One``关卡
this.toggle（）
}
}
切换（）{
this.setState（（{isOpen}）=>（{isOpen:！isOpen}））；
}
render（）{
让isLastChild=this.props.children？false:true；
返回(
{this.props.name}
{isLastChild？：''}
);
}
}
render（，document.getElementById（“根”））

你应该在你的
道具中添加一些东西来说明组件的深度。@HagaiWild，你能帮我提供一个解决方案吗？？非常感谢你的帮助。。坚持了太久…这就是为什么我很高兴避免反应之类的。使用AngularJS有几年了，最终得到的只是一堆在别处无法使用的AngularJS代码。还有很多类似上述的问题。使用bootstrap 4，我用
document.getElementById（'id'）打开导航菜单/下拉菜单。单击（）
@davidkonrad，但现在它是在react中创建的，我无法更改框架/库
document.getElementById（'id'）。click（）
正在使所有菜单和子菜单在出现问题的时候打开。你应该在
道具中添加一些东西来告诉组件的深度级别。@HagaiWild，你能帮我提供一个解决方案吗？？非常感谢你的帮助。。坚持了太久…这就是为什么我很高兴避免反应之类的。使用AngularJS有几年了，最终得到的只是一堆在别处无法使用的AngularJS代码。还有很多类似上述的问题。使用bootstrap 4，我用
document.getElementById（'id'）打开导航菜单/下拉菜单。单击（）
@davidkonrad，但现在它是在react中创建的，我无法更改框架/库
document.getElementById（'id'）。click（）
正在使所有菜单和子菜单在出现问题时打开。。