Javascript 仅切换在Reactjs中单击的菜单

我正在使用

递归函数制作一个菜单和子菜单

，我需要帮助才能打开相应的菜单和子菜单

对于按钮和折叠已使用

执行菜单填充的递归函数：

{this.state.menuItems &&
          this.state.menuItems.map((item, index) => {
            return (
              <div key={item.id}>
                <Button onClick={this.toggle.bind(this)}> {item.name} </Button>
                <Collapse isOpen={this.state.isToggleOpen}>
                  {this.buildMenu(item.children)}
                </Collapse>
              </div>
            );
          })}

到目前为止，代码没有问题，但我需要帮助来逐步打开和关闭相应级别的

菜单->子菜单->子菜单

工作示例：

您可以看看这个示例，当您单击任何菜单时，整个菜单级别都会打开，而不是单击一个

要求

如果用户单击菜单
One
，则子菜单（子菜单）

需要打开

然后，如果用户单击了一个

 ->   One-One-One
 ->   One - one - two
 ->   One - one - three

需要打开

同样，它是嵌套的，因此在单击任何菜单/子菜单后，需要打开它们各自的下一级

我是react和reactstrap设计方面的新手，因此任何来自专业知识的帮助都将有助于我继续并了解实际需要如何操作。
您需要创建一个内部组件来管理每个级别的状态

例如，考虑下面的函数组件（我将留给您转换为类组件）：
const菜单按钮=（{name，children}）=>{
const[open，setOpen]=useState（false）；
const toggle=useCallback（（）=>setOpen（o=>！o），[setOpen]）；
返回(
{name}
{儿童}
);
};

此组件将管理是否显示其子项。使用它代替所有的
部分，它将管理每个级别的打开状态

将共享状态保持在顶部，但如果您不需要知道是否为其他逻辑扩展了某些内容，请将其本地化

此外，如果您确实需要父组件中的信息，请使用您已有的预定义对象，并向其添加一个默认为false的“打开”字段。单击后，在该对象上设置state以正确标记相应对象，使参数true on open

不过，局部状态要干净得多

扩展示例

import React，{Component，useState，useCallback，Fragment}来自“React”；
从“reactstrap”导入{Collapse，Button}；
从“/service”导入{loadMenu}；
常量菜单按钮=（{name，children}）=>{
const[open，setOpen]=React.useState（false）；
const toggle=useCallback（（）=>setOpen（o=>！o），[setOpen]）；
返回(
{name}
{儿童}
);
};
类Hello扩展组件{
建造师（道具）{
超级（道具）；
此.state={
当前选择：“”，
菜单项：[]，
};
}
componentDidMount（）{
loadMenu（）.then（items=>this.setState（{menuItems:items}））；
}
构建菜单（项目）{
返回(

{项目&&
items.map（item=>(

{item.children&&item.children.length>0
？此.buildMenu（项.children）
：null}

))}

);
}
render（）{
返回(
单击以下任一选项
{this.state.menuItems&&
this.state.menuItems.map（（项，索引）=>{
返回(
{this.buildMenu（item.children）}
);
})}
);
}
}
导出默认Hello；
>P>而不是使用一个大的组件，考虑将组件拆分为更小的一次。通过这种方式，您可以向每个菜单项添加状态，以切换基础菜单项

如果要将所有基础菜单项重置为其默认关闭位置，则应在每次打开基础按钮时创建一个新的组件实例。通过有
Promise.resolve（[{id:“1”，name:“1”，children:[{id:“1.1”，name:“1-1-1”}，{id:“1.1.2”，name:“1-1-2”}，{id:“1.1.3”，name:“1-1-3”}，{id:“2”，name:“2”，children id:[{id:“2.1”，name:“2-1”}，{id:“3”，children id:“3”，children id:{id:“3”，children id:{id:{1:}，children“3.1.1”，姓名：“三一一”，儿童：[{id:“3.1.1.1”，姓名：“三一一”，儿童：[{id:“3.1.1.1”，姓名：“三一一一一一一”}]}]}]}，{id:“4”，姓名：“四”}，{id:“5”，姓名：“五”，儿童：[{id:“5.1”，姓名：“五-一”}，{id:{id:“5.2”，姓名：“五-二”}，{id:{id:“5.3”，姓名：“五-三”{id:“五”{id:“五”}，姓名：{6}"}]);
常量{Component，Fragment}=React；
const{Button，Collapse}=Reactstrap；
类菜单扩展组件{
建造师（道具）{
超级（道具）；
this.state={menuItems:[]}；
}
render（）{
const{menuItems}=this.state；
返回；
}
componentDidMount（）{
loadMenu（）.then（menuItems=>this.setState（{menuItems}））；
}
}
类MenuItemContainer扩展组件{
render（）{
const{menuItems}=this.props；
如果（！menuItems.length）返回空值；
return
{menuItems.map（this.rendernumitem）}
；
}
RenderNuItem（菜单项）{
const{id}=menuItem；
返回
；
}
}
MenuItemContainer.defaultProps={menuItems:[]}；
类MenuItem扩展组件{
建造师（道具）{
超级（道具）；
this.state={isOpen:false，timesOpen:0}；
this.open=this.open.bind（this）；
this.close=this.close.bind（this）；
}
render（）{
const{name，children}=this.props；
const{isOpen，timesOpen}=this.state；
返回(
{name}
);
}
开（）{
this.setState（（{timesOpen}）=>({
是的，
时间打开：时间打开+1，
}));
}
关闭（）{
this.setState（{isOpen:false}）；
}
}
render（，document.getElementById（“根”））
谢谢你的建议。。可以吗
-> One-One 

 ->   One-One-One
 ->   One - one - two
 ->   One - one - three