javascript - 使用 AdminLTE3 侧边栏树形视图反应问题
问题描述
所以我想制作一个带有“员工”项目的 React 侧边栏,单击该项目将展开三个子项目。
这是代码
import React, { Component } from "react";
export default class Sidebar extends Component {
constructor(props) {
super(props);
this.state = {
user: {}
}
}
componentDidMount() {
let userData = JSON.parse(localStorage.getItem('user'))
this.setState({user: userData})
}
render() {
return (
<aside className="main-sidebar sidebar-dark-primary elevation-4" >
{/* Brand Logo */}
<a href="/" className="brand-link">
<span className="brand-text font-weight-light ml-1">HRMS</span>
</a>
{/* Sidebar */}
<div className="sidebar">
{/* Sidebar user panel (optional) */}
<div className="user-panel mt-3 pb-3 mb-3 d-flex">
<div className="image">
<img
src={process.env.PUBLIC_URL + '/dist/img/user2-160x160.jpg'}
className="img-circle elevation-2"
alt="User Image"
/>
</div>
<div className="info">
<a href="#" className="d-block">
{this.state.user.fullname}
</a>
</div>
</div>
{/* Sidebar Menu */}
<nav className="mt-2">
<ul
className="nav nav-pills nav-sidebar flex-column"
data-widget="treeview"
role="menu"
data-accordion="false"
>
{/* Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library */}
<li className="nav-item">
<a href="/" className="nav-link active">
<i className="nav-icon fas fa-tachometer-alt" />
<p>
Dashboard
<span className="right badge badge-success">Home</span>
</p>
</a>
</li>
<li className="nav-item">
<a href="pages/widgets.html" className="nav-link">
<i className="nav-icon fas fa-th" />
<p>
Widgets
<span className="right badge badge-danger">New</span>
</p>
</a>
</li>
<li className="nav-item has-treeview">
<a href="#" className="nav-link">
<i className="nav-icon fa fa-user" />
<p>
Employee
<i className="right fas fa-angle-left" />
</p>
</a>
<ul className="nav nav-treeview">
<li className="nav-item">
<a href="/employee-add" className="nav-link">
<i className="fa fa-user-plus nav-icon" />
<p>Add Employee</p>
</a>
</li>
<li className="nav-item">
<a href="/employee-list" className="nav-link">
<i className="fas fa-users nav-icon" />
<p>Employee List</p>
</a>
</li>
<li className="nav-item">
<a href="/employee-add" className="nav-link">
<i className="far fa-circle nav-icon" />
<p>Employee Award</p>
</a>
</li>
</ul>
</li>
问题是登录重定向到此页面后,我单击 Employee 项目,href 激活并重新加载页面(通常是 href="#" )。但是,如果我删除<i></i>
标签或href
css 都搞砸了。
我正在使用 AdminLTE3,所以这里是文档:https ://adminlte.io/docs/3.0/javascript/treeview.html
解决方案
我找到了答案,因为这对很多人来说都是一个问题。当您从另一个页面(即登录页面)重定向时会出现问题
这是答案的链接:https ://github.com/ColorlibHQ/AdminLTE/issues/1570#issuecomment-615841382
推荐阅读
- r - 将字符串 2000 年 1 月 1 日上午 12:00 转换为 r 中的日期时间
- latex - Latex 缩进会为每个备用页面自动更改
- powerbi - Powerbi Desktop:如何在不选择每个项目的情况下进行过滤?
- javascript - 在数组中按特定顺序分配颜色
- javascript - 从 Array.prototype.indexOf.call 中排除某些元素
- java - Thymeleaf - 如何显示未包含在 th:text 中的文本
- wordpress - 如何创建简码以在页面部分显示 Custon Taxonomy 的术语及其图像?
- bash - 脚本在容器中失败,但奇异性返回 0(无错误)
- python - 将元组作为键的字典转换为 JSON
- haproxy - 使用设备检测在 macOS 上安装 HAProxy