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

Question

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

Answer 1

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

首先，让我们创建样式

* {
    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;
}

在 app 组件里面放

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});
  }
}