Выпадающий список не работает в React - PullRequest
Новая
       62

Выпадающий список не работает в React

0 голосов
/ 29 апреля 2020

Я создал панель навигации с раскрывающимся списком, в котором отображаются параметры пользователя, когда пользователь вошел в систему, а если он не вошел в систему, вместо панели раскрывающегося списка будут отображаться кнопки «Вход» и «Зарегистрироваться». Когда пользователь вошел в систему, раскрывающийся список отображается, но не работает. Это метод рендеринга: 

var navDropdownBtn = this.props.loggedIn ? (
        <div>
            <li>
                <a className="dropdown-trigger" href="#!" data-target="dropdown1">
                    <i className="material-icons left">account_circle</i>
                    {this.props.currentUsername}
                    <i className="material-icons right">arrow_drop_down</i>
                </a>
            </li>
        </div>
    ) : (
            <div>
                <li><NavLink to="/login">Log In</NavLink ></li >
                <li><NavLink to="/signup">Sign Up</NavLink></li>
            </div>
        )



    var sidenavBtns = this.props.loggedIn ? (
        <div>                
            <li className="sidenav-close">
                <NavLink to={"/profile/" + this.props.currentUsername + "/"}>
                    <i className="material-icons left">account_circle</i>
                    {this.props.currentUsername}
                </NavLink>
            </li>
            <li className="divider"></li>
            <li className="sidenav-close"><NavLink to="/" onClick={this.props.appHandleLogOut}>Log Out</NavLink></li>

        </div>
    ) : (
            <div>
                <li className="sidenav-close"><NavLink to="/login">Log In</NavLink ></li >
                <li className="sidenav-close"><NavLink to="/signup">Sign Up</NavLink></li>
            </div>
        )




    return (
        <div>
            <div className="navbar-fixed">
                <ul id="dropdown1" className="dropdown-content">
                    <li><NavLink to={"/profile/" + this.props.currentUsername + "/"}>My Profile</NavLink></li>
                    <li><NavLink to="/" onClick={this.props.appHandleLogOut}>Log Out</NavLink></li>
                </ul>
                <nav>
                    <div className="nav-wrapper indigo">
                        <div className="container">
                            <ul className="left">
                                <NavLink to="/" className="brand-logo" >LOGO</NavLink>
                            </ul>
                            <a className="sidenav-trigger hide-on-larg" data-target="idSidenav">
                                <i className="material-icons">menu</i>
                            </a>
                            <ul className="right hide-on-med-and-down">
                                {navDropdownBtn}
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>
            <ul className="sidenav" id="idSidenav">
                {sidenavBtns}
            </ul>
        </div>
    )

Тогда, если я заставлю троичное значение true, как это 

var navDropdownBtn = true ? (
        <div>...

, выпадающий список работает нормально, но c не является решением. что не так?

...