Reactstrap Многоуровневые выпадающие предки не закрываются - PullRequest
Новая
       10

Reactstrap Многоуровневые выпадающие предки не закрываются

0 голосов
/ 11 января 2020

Я занимаюсь разработкой многоуровневого выпадающего меню для intr anet Я строю. Решив go с 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>
        );
    }
}

Единственная проблема, которая у меня сейчас есть, - открытые элементы не закрываются когда опция нажата. Я бы предпочел сделать это без сохранения состояния и в конечном итоге включить его в качестве функционального компонента, но сейчас я извлекаю Sitemap из Redux.

Спасибо.

1 Ответ

0 голосов
/ 18 января 2020

Я не смог найти решение, но нашел функциональный обходной путь, который потребляет очень мало ресурсов.

В моем главном компоненте SPA я размещаю как компонент, так и компонент текущей страницы. Что я сделал, когда понял, что закрытие меню было закрыто, добавив немного урезанного в функцию componentDidUpdate (): 

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

Это фактически приводит к закрытию меню после появления новой страницы. Началась загрузка. Проблема решена.

...