Question

因此，我想使用一个“雇员”项创建一个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

Answer 1

我找到了答案，因为这对很多人来说都是一个问题。当您从另一个页面（即登录页面）重定向时，会发生此问题

以下是答案的链接：https://github.com/ColorlibHQ/AdminLTE/issues/1570#issuecomment-615841382

使用AdminLTE3侧边栏树形视图解决问题

1 个答案: