React后台管理系统-顶部NavTop组件设计

Posted 2020-11-20 wangyawei

利用了bootstrap制作导航栏

1. <div className="navbar navbar-default top-navbar">
2.                <div className="navbar-header">
3.                    <Link className="navbar-brand" to="/"><b>HAPPY</b>MMALL</Link>
4.                </div>
5.  
6.                <ul className="nav navbar-top-links navbar-right">
7.                    <li className="dropdown">
8.                        <a className="dropdown-toggle" href="javascript:;">
9.                            <i className="fa fa-user fa-fw"></i>
10.                            {
11.                                this.state.username
12.                                ? <span>欢迎，{this.state.username}</span>
13.                                : <span>欢迎您</span>
14.                            }
15.                            <i className="fa fa-caret-down"></i>
16.                        </a>
17.                        <ul className="dropdown-menu dropdown-user">
18.                            <li>
19.                                <a onClick={() => {this.onLogout()}}>
20.                                    <i className="fa fa-sign-out fa-fw"></i>
21.                                    <span>退出登录</span>
22.                                </a>
23.                            </li>
24.                        </ul>
25.                    </li>
26.                </ul>
27.            </div>