问AdminLTE3侧边栏树形视图的反应问题
EN

Stack Overflow用户

提问于 2020-06-02 18:16:47

回答 1查看 1.1K关注 0票数 0

因此，我想创建一个带有“Employee”项的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

html