Reactstrap Multi-Level Dropdown祖先不关闭

Question

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

到目前为止，我开发的功能运行良好，但有一个例外:单击NavLink时，打开的菜单项不会折叠。

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

这是我的组件的代码。

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

    NavListItem = (item, level) => {
        if (item.children.length > 0) {
            return (
                
                    
                        {item.title}
                    
                    
                        
                            {item.children.map((listItem) => this.NavListItem(listItem, level + 1))}
                        
                    
                
            )
        }

        else {
            return (
                
                     { this.props.updateCurrentPage(item) }} className="menu menu-link" key={"DDNavLink_" + item.pageId}>{item.title}
                
            )
        }
    }


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

        const toggle = () => setIsOpen(!this.state.isOpen);
        return (
            
                
                     this.props.updateCurrentPage(null)}
                        className="align-top met-logo">
                    
                
                
                    
                        
                        
                            {this.props.siteMap.siteMapData.map((link) => this.NavListItem(link, 0))}
                        

                    
                
            
        );
    }
}

我现在唯一的问题是，当一个选项被点击时，打开的项目不会关闭。我希望最终将其设置为无状态，并将其作为一个功能组件，但目前我正在从Redux中拉出Sitemap。

谢谢。

Answer 1

我找不到解决方案，但确实想出了一个功能性的变通方法，只需要很少的资源。

在SPA的MainComponent中，我同时托管组件和当前页面组件。当我意识到单击菜单关闭了它时，我所做的就是在componentDidUpdate()函数中添加了一小段代码：

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

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