Reactstrap 多级下拉祖先不关闭

Posted 2023-03-23

【中文标题】Reactstrap 多级下拉祖先不关闭

【英文标题】：Reactstrap Multi-Level Dropdown Ancestors don't close

【发布时间】：2020-04-28 14:42:13

【问题描述】：

我一直在为我正在构建的 Intranet 开发一个多级下拉菜单组件。决定在这方面使用 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 (
                <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>
        );
    

我现在唯一的问题是单击选项时打开的项目不会关闭。我希望最好将它设为无状态并最终将其作为功能组件放入，但现在我正在从 Redux 中提取 Sitemap。

谢谢。

【参考方案1】：

我找不到解决方案，但确实想出了一个占用资源很少的实用解决方法。

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

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

这会在新页面开始加载后有效地导致菜单关闭。问题解决了。