Javascript 有没有一种简单的方法可以在ReactJS中创建一个嵌套下拉列表，而不需要大量的状态？

我的代码可以工作，但我觉得有一种方法可以做到这一点，而不必声明大量的状态

单击导航时，它会打开所有SectionHeader，单击其中一个SectionHeader时，它会打开子节（一次只允许打开一个子节）

isFilterOpen

打开但潜艇关闭

一个子打开（一次只能打开一个子，它们会切换）

现在，我的代码如下所示：

类MobileFilter扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
isFilterOpen:false，
开放式：{
业务：假，
资料来源：错，
需要：假，
执行：错误，
类型：false，
基础：错误，
优点：错误，
高级：错误，
催化剂：错，
团队：错，
},
};
this.filterBar=React.createRef（）；
}
handleFilterClick=（）=>{
常数{
isFilterOpen
}=本州；
这是我的国家({
isFilterOpen:！isFilterOpen，
});
};
handleSectionClick=标题=>{
让selectedSection=标题；
if（标题拆分（“”）。长度>1）{
selectedSection=title.split（“”）[0]；//eslint禁用行
}
this.setState（prevState=>{
const newState={}；
Object.keys（prevState.isSectionOpen）.forEach（key=>{
newState[key]=false；
});
newState[selectedSection]=！prevState.isSectionOpen[selectedSection]；
返回{
…国家，
开放式：{
…新闻状态，
},
};
});
};
render（）{
const{isFilterOpen}=this.state；
常数{
需要=“”，
执行=“”，
类型=“”，
customerStoriesURL=“”，
垂直的，
}=这是道具；
常量过滤器类=isFilterOpen
“showMobileSections”
：“hideMobileSections”；
const wrapperClass=isFilterOpen
？“mobileFilterWrapperActive”
：“mobileFilterWrapper”；
const filterData=this.getData（垂直）；
如果（垂直==‘服务’）{
返回(
导航中心
{this.renderSections（'Foundations'，filterData.Foundations）}
{this.renderSections（'Advantage'，filterData.Advantage）}
{this.renderSections（'Advanced'，filterData.Advanced）}
{this.renderSections（'Catalyst'，filterData.Catalyst）}
{this.renderSections(
“团队版”，
filterData[“团队版”]，
)}
);
}
返回(
导航中心
{this.renderSections（need，filterData.need）}
{实施(
{this.renderSections（实现，filterData.implementation）}
)：null}
{this.renderSections（type，filterData.type）}
客户故事
);
}
}
导出默认MobileFilter我想我找到了解决办法。我需要从头开始。以下是我所拥有的：


import React，{Component}来自'React'；
从“盖茨比”导入{Link}；
从“../Search”导入搜索；
从“/filterData”导入{businessData}；
导入“./newFilter.less”；
类NewFilter扩展组件{
建造师（道具）{
超级（道具）；
此.state={
伊索彭：错，
开放的子节：“”，
};
}
handleClick=（）=>{
const{isOpen}=this.state；
如果（！isOpen）{
这是我的国家({
开放的子节：“”，
});
}
这是我的国家({
伊索本：！伊索本，
});
};
handleSubClick=（e，标题）=>{
const{openSubSection}=this.state；
如果（openSubSection==标题）{
这是我的国家({
开放的子节：“”，
});
}否则{
这是我的国家({
第一小节：标题，
});
}
};
//renderLinks=subvels=>subvels.map（（{title}）=>{title}）；
renderLinks=子级别=>
map（{url\u slug，title}）=>{
如果（！url\u slug）{
返回(
{title}
);
}
返回(
{title}
);
});
renderSection=section=>{
const{isOpen，openSubSection}=this.state；
const{title，sublevels}=节；
设sectionClass='hideMobileSections'；
让sectionOpen='sectionTabClosed'；
设subSectionClass='hideMobileContent'；
设arrowClass='arrow-arrow--active'；
if（等参线）{
sectionClass='showMobileSections'；
}
如果（openSubSection==标题）{
subSectionClass='showMobileContent'；
sectionOpen='sectionTabOpen'；
arrowClass='arrow'；
}
//const sectionClass=isOpen？'section_uuopen'：'section_uclosed'；
返回(
this.handleSubClick（e，title）}
type=“按钮”
键={title}
className={sectionOpen}
>
{title}
{this.renderLinks（子级别）}
);
};
renderSections=节=>
sections.map（section=>this.renderSection（section））；
render（）{
const{isOpen}=this.state；
const{navTitle，sections}=businessData；
让wrapperClass='mobileFilterWrapper'；
if（等参线）{
wrapperClass='mobileFilterWrapperActive'；
}
返回(