Question

请帮助。我正在尝试向导航栏添加功能，以便在单击菜单按钮时弹出侧面导航栏。没用我已经在网上广泛搜索。 signedInLinks是一个脚本，其中包含有人登录时使用的链接。布尔值true是一个占位符，稍后将包含auth.uid来检查某人是否已登录（如果您想要帮助我，请也做一下-当我使用this.state.links时，它会引发错误。如何让我的程序显示具有功能的导航栏（弹出菜单等）？

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);

Answer 1

您不返回任何信息：

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

尝试这样的事情：

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

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

以上方法，您将检查条件是否为真。如果是，它将返回并呈现SignedLinks。否则，您将渲染null。

导航栏功能吗？

1 个答案: