Drop down menu Reactstrap多级下拉菜单don'；关不上

我一直在为我正在构建的内部网开发一个多级下拉菜单组件。决定在这个问题上使用React，我想我的多级菜单会很简单。显然不是：）

到目前为止，我开发的功能运行得非常好，只有一个例外：单击导航链接时，打开的菜单项不会折叠

我添加的所有CSS类都是外观类，没有定位语句。我已经使用JSON源文件和Reactstrap构建了它

这是我的组件的代码

class MenuBar extends Component {
    constructor(props) {
         this.NavListItem = this.NavListItem.bind(this);
    }

    NavListItem = (item, level) => {
        if (item.children.length > 0) {
            return (
                <UncontrolledDropdown direction={level!==0?"right":"down"} nav inNavbar className="menu menu-UncontrolledDropdown" key={"UCD_" + item.pageId}>
                    <DropdownToggle nav caret 
                    className="menu menu-dropdown-toggle item title"
                     key={"DDToggle_" + item.pageId}
                     id={"DDToggle_" + item.pageId}
                     >
                        {item.title}
                    </DropdownToggle>
                    <DropdownMenu  className="menu menu-dropdown-container">
                        <Nav>
                            {item.children.map((listItem) => this.NavListItem(listItem, level + 1))}
                        </Nav>
                    </DropdownMenu>
                </UncontrolledDropdown>
            )
        }

        else {
            return (
                <NavItem className="menu menu-item-container" key={"DDNavItem_" + item.pageId}>
                    <NavLink onClick={() => { this.props.updateCurrentPage(item) }} className="menu menu-link" key={"DDNavLink_" + item.pageId}>{item.title}</NavLink>
                </NavItem>
            )
        }
    }


    render() {
        const setIsOpen = (value) => {
            this.setState({ isOpen: value })
        }

        const toggle = () => setIsOpen(!this.state.isOpen);
        return (
            <div className="row">
                <div className="col-2 p-3 menu">
                    <div onClick={() => this.props.updateCurrentPage(null)}
                        className="align-top met-logo">
                    </div>
                </div>
                <div className="col col-md-6  offset-1 menu ">
                    <Navbar color="light" light expand="md" className="menu menu-bar">
                        <NavbarToggler onClick={toggle} className="menu menu-toggler" />
                        <Nav className="mr-auto" navbar>
                            {this.props.siteMap.siteMapData.map((link) => this.NavListItem(link, 0))}
                        </Nav>

                    </Navbar>
                </div>
            </div>
        );
    }
}

类菜单栏扩展组件{
建造师（道具）{
this.NavListItem=this.NavListItem.bind（this）；
}
NavListItem=（项目，级别）=>{
如果（item.children.length>0）{
返回(
{item.title}
{item.children.map（（listItem）=>this.NavListItem（listItem，级别+1））}
)
}
否则{
返回(
{this.props.updateCurrentPage（item）}className=“menu menu link”key={“DDNavLink”+item.pageId}>{item.title}
)
}
}
render（）{
常量setIsOpen=（值）=>{
this.setState（{isOpen:value}）
}
const toggle=（）=>setIsOpen（！this.state.isOpen）；
返回(
this.props.updateCurrentPage（null）}
className=“对齐顶级met徽标”>
{this.props.siteMap.siteMapData.map（（link）=>this.NavListItem（link，0））}
);
}
}

我现在唯一的问题是，单击某个选项时，打开的项目没有关闭。我更愿意将此无状态化，并最终将其作为一个功能组件放入其中，但目前我正在从Redux中提取Sitemap

---

谢谢。

我找不到解决方案，但找到了一个只需很少资源的功能性解决方案

在SPA的主组件中，我同时托管该组件和当前页面组件。当我意识到单击菜单关闭它时，我所做的是在componentDidUpdate（）函数中添加一个小片段：

componentDidUpdate(){
  //work around for menu not closing.
  document.getElementById("rootDiv").click(); 
}

这实际上会导致菜单在新页面开始加载后关闭。问题解决了