Javascript REACT：有条件地呈现JSX

我在建立一个有侧边栏的网站时面临这个问题。我试图实现这样一种行为：侧边栏仅在单击子菜单项时关闭，而不是在单击父元素时关闭。正如你们所看到的，我不想在点击概览、州财政和预算时关闭侧边栏

为了实现这种行为，我尝试在sidebar.js文件中有条件地呈现JSX，如下面的代码片段所示。buttonhook是一个附加了onClick事件的组件

{SidebarData.map（（项目，索引）=>{
返回
{item.subNav&&
item.subNav.map（子项=>{
return subItem.cName？真：假
})
？
<子菜单项={item}
key={index}/>
：<子菜单
item={item}
key={index}/>
}                    
})
}

也许您可以使用

上下文Api

并在变量中确定是否应该呈现侧边栏。然后，当用户单击子菜单项时，您应该更改此变量。好的，我想使用上下文api，但后来我想“这只是有条件地呈现JSX，可能有多困难？”并尝试这样做。如果可能的话，我想知道解决方案，因为这种必须通过映射对象数组有条件地呈现JSX的场景并不少见。