如何使用 react-router-dom 实现带有子侧边栏的侧边栏？

问题描述

我正在尝试制作一个带有子侧边栏的侧边栏，其中主侧边栏中的每个项目都有一些需要在子侧边栏中列出的子项目。 如下图所示。

解决方法

所以它相当复杂，但你会理解并获得所有代码

首先，让我们创建样式

* {
    margin: 0;
    padding: 0;

    box-sizing: border-box;
}

body {
    height: 100vh;
}

body > #root {
    height: 100%;
    width: 100%;
}


body > #root > #sidebar {
    float: left;
    width: 20%;
    height: 100%;

    background: #EBE9EB;
    border-right: solid 1px black;
}

body > #root > #sub-sidebar {
    float: left;
    width: 20%;
    height: 100%;

    background: #EBE9EB;
}

body > #root > #content {
    float: left;
    width: 60%;
    height: 100%;

    background: white;
}

在应用组件内部放置

import * as React from "react";
import "./style.css";

export default class App extends React.Component {
  state = {
    sidebar: 0,// index of the sidebar
    sub_sidebar: 0,// index of the sub sidebar
  }

  // method to rendering the content
  renderingTheContent = () => {
    // switching the content with index of sidebar and the sub-sidebar
    switch (this.state.sidebar) {
      case 0:
        switch (this.state.sub_sidebar) {
          case 0:
            return <span>overview</span>;
          case 1:
            return <span>hello</span>;
        }
      case 1:
        switch (this.state.sub_sidebar) {
          case 0:
            return <span>hola</span>;
          case 1:
            return <span>shop</span>;
        }
      case 2:
        switch (this.state.sub_sidebar) {
          case 0:
            return <span>black</span>;
          case 1:
            return <span>red</span>;
        }
    }
  }

  // method to rendering the sub sidebar
  renderingTheSubSideBar = () => {
    // switching the sub-sidebar with index of sidebar
    switch (this.state.sidebar) {
      case 0:
        return (
          <ul>
            <li onClick={() => this.setSubSideBar(0)}>overview</li>
            <li onClick={() => this.setSubSideBar(1)}>hello</li>
          </ul>
        );
      case 1:
        return (
          <ul>
            <li onClick={() => this.setSubSideBar(0)}>hola</li>
            <li onClick={() => this.setSubSideBar(1)}>shop</li>
          </ul>
        );
      case 2:
        return (
          <ul>
            <li onClick={() => this.setSubSideBar(0)}>black</li>
            <li onClick={() => this.setSubSideBar(1)}>red</li>
          </ul>
        );
    }
  }

  render() {
    return (
      <React.Fragment>
        {/*first side bar*/}
        <div id={"sidebar"}>
          <ul>
            <li onClick={() => this.setSideBar(0)}>Dashboard</li>
            <li onClick={() => this.setSideBar(1)}>hello</li>
            <li onClick={() => this.setSideBar(2)}>welcome</li>
          </ul>
        </div>

        {/*the sub side bar*/}
        <div id={"sub-sidebar"}>
          {this.renderingTheSubSideBar()}
        </div>

        {/*the content*/}
        <div id={"content"}>
          {this.renderingTheContent()}
        </div>
      </React.Fragment>
    );
  };

  // set the new index of the sidebar
  setSideBar = (newSidebar) => {
    this.setState({sidebar: newSidebar});
  }

  // set the new index of the sub sidebar
  setSubSideBar = (newSubSidebar) => {
    this.setState({sub_sidebar: newSubSidebar});
  }
}