Функциональность навбара? - PullRequest
Новая
       20

Функциональность навбара?

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

Пожалуйста, помогите. Я пытаюсь добавить функциональность к моей панели навигации, чтобы при нажатии кнопки меню появлялась боковая панель навигации. Не работает Я много искал в Интернете. signedInLinks - это скрипт, ссылки на который используются, если кто-то вошел в систему. Логическое значение true - это заполнитель, который позже будет содержать auth.uid, чтобы проверить, вошел ли человек в систему (если вы хотите помочь мне в этом. , пожалуйста, сделайте так же - когда я использую this.state.links, это выдает ошибку. Как я могу заставить мою программу отображать навигационную панель с функциональностью (всплывающее меню et c)? 

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import SignedInLinks from './SignedInLinks';
import SignedOutLinks from './SignedOutLinks';
import { connect } from 'react-redux';
import { NavLink } from 'react-router-dom';
import "materialize-css/dist/css/materialize.min.css"
import M from  'materialize-css/dist/js/materialize.min.js';

class Navbar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            auth : this.props,
            links : this.props.auth.uid ? <SignedInLinks /> : <SignedOutLinks />
        } 
    }



    componentDidMount() {
        const M=window.M;
        document.addEventListener('DOMContentLoaded', function() {
            var elems = document.querySelectorAll('.sidenav');
            M.Sidenav.init(elems, {});
        });
    }

    render () {
        return (


            <div>

            <nav className="nav-wrapper blue darken-4">
                <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"></link>

                <div class='container'>
                <a href="/" className='brand-logo'>DSHS</a>
                <a href="/" className="sidenav-trigger" data-target="mobile links">
                    <i className="material-icons">menu</i>
                </a>
                    <ul className="right hide-on-med-and-down">

                        {true && <SignedInLinks />}
                    </ul>
                </div>
            </nav>
            <ul className="sidenav" id="mobile-links">
                {true && <SignedInLinks />}
            </ul>
            </div>
        );
    }

}


const mapStateToProps = (state) => {
    return {
        auth: state.firebase.auth
    }
}
export default connect(mapStateToProps)(Navbar);

1 Ответ

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

Вы ничего не возвращаете по адресу: 

               <ul className="right hide-on-med-and-down">
                    {true && <SignedInLinks />}
               </ul>

Попробуйте что-то вроде этого: 

                <ul className="right hide-on-med-and-down">

                    {condition ? <SignedInLinks /> : null}
                </ul>

Способ выше, вы собираетесь проверить, верно ли ваше условие. Если это так, он вернется и отобразит SignedLinks. В противном случае вы будете делать ноль.

...