使侧边栏响应不正常的反应吗？

Question

问题：

我已经创建了带有光boostrap dashbord模板的标题组件和侧边栏组件。

这是我的标头组件。

Auth.currentSession()

这是我的侧边栏组件的外观。

import React, { PureComponent } from "react";


class Header extends PureComponent {
  constructor(props) {
    super(props);
    this.mobileSidebarToggle = this.mobileSidebarToggle.bind(this);
    this.state = {
      sidebarExists: false
    };
  }

  mobileSidebarToggle(e) {
    if (this.state.sidebarExists === false) {
      this.setState({
        sidebarExists: true
      });
    }
    e.preventDefault();
    document.documentElement.classList.toggle("nav-open");
    var node = document.createElement("div");
    node.id = "bodyClick";
    node.onclick = function() {
      this.parentElement.removeChild(this);
      document.documentElement.classList.toggle("nav-open");
    };
    document.body.appendChild(node);
  }

  render() {
    return (  
      <nav className="navbar navbar-expand-lg" color-on-scroll="500">
        <div className="container-fluid">
          <a className="navbar-brand" href="#">
            Dashbord
          </a>
          <button
            onclick={this.mobileSidebarToggle()}
            className="navbar-toggler navbar-toggler-right"
            type="button"
            data-toggle="colapse"
            aria-controls="navigation-index"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span className="navbar-toggler-bar burger-lines" />
            <span className="navbar-toggler-bar burger-lines" />
            <span className="navbar-toggler-bar burger-lines" />
          </button>
          <div
            className="collapse navbar-collapse justify-content-end"
            id="navigation"
          >
            <ul className="nav navbar-nav mr-auto">
              <li className="nav-item">
                <a href="#" className="nav-link" data-toggle="dropdown">
                  <span className="d-lg-none">Dashboard</span>
                </a>
              </li>
              <li className="dropdown nav-item">
                <a
                  href="#"
                  className="dropdown-toggle nav-link"
                  data-toggle="dropdown"
                >
                  <i className="nc-icon nc-planet" />
                  <span className="d-lg-none">Notification</span>
                </a>
                <ul className="dropdown-menu" />
              </li>
            </ul>
            <ul className="navbar-nav ml-auto">
              <li className="nav-item">
                <a className="nav-link" href="#pablo">
                  <span className="no-icon">
                    <i
                      class="fas fa-user-circle"
                      style={{ marginRight: "5px" }}
                    />
                    Admin
                  </span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    );
  }
}

export default Header;

在这里，我提供了dashbord组件，我正在使用这两个组件。

import React, { PureComponent } from "react";

import imagine from "../../assets/img/sidebar-3.jpg";

class Sidebar extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      width: window.innerWidth
    };
  }

  activeRoute(routeName) {
    return this.props.location.pathname.indexOf(routeName) > -1 ? "active" : "";
  }

  updateDimensions() {
    this.setState({ width: window.innerWidth });
  }

  componentDidMount() {
    this.updateDimensions();
    window.addEventListener("resize", this.updateDimensions.bind(this));
  }

  render() {
    const sidebarBackground = {
      backgroundImage: "url(" + imagine + ")"
    };
    return (
      <div className="sidebar" data-image={imagine} id="sidebar">
        <div className="sidebar-background" style={sidebarBackground} />
        <div className="sidebar-wrapper">
          <div className="logo">
            <a href="" className="simple-text">
              <img
                src="../../images/favicon.png"
                style={{ maxHeight: "50px" }}
              />
              Trafficfine
            </a>
          </div>
          <ul className="nav">
            <li className="nav-item active">
              <a className="nav-link" href="#">
                <i className="fas fa-tachometer-alt" />
                <p>Dashboard</p>
              </a>
            </li>
            <li>
              <a className="nav-link" href="">
                <i className="fas fa-briefcase" />
                <p>Officers</p>
              </a>
            </li>
            <li>
              <a className="nav-link" href="">
                <i className="fas fa-times-circle" />
                <p>Offences</p>
              </a>
            </li>
            <li>
              <a className="nav-link" href="">
                <i className="fas fa-bus-alt" />
                <p>Drivers</p>
              </a>
            </li>
          </ul>
        </div>
      </div>
    );
  }
}

export default Sidebar;

但是这不起作用，这给了我一个错误。我尝试了很多方法，但是没有按预期工作。有人可以帮助我做出回应吗？谢谢！！