如何在 ReactJS 中创建带有下拉菜单的响应式侧边栏？

在本文中，我们将讨论如何在 ReactJS 中创建带有下拉菜单的响应式侧边栏。我们将使用 React Bootstrap 来创建响应式侧边栏，并使用 CSS 来自定义样式。

前提条件

在继续之前，请确保您已经安装了以下软件：

• Node.js
• NPM

步骤 1 - 安装依赖

在开始之前，我们需要安装 React Bootstrap 和 React Router Dom 库。请使用以下命令进行安装：

npm install react-bootstrap react-router-dom

步骤 2 - 创建组件

我们将使用 React 类组件来创建响应式侧边栏。创建一个名为 Sidebar 的组件，并将其放置在 src/components 文件夹中。

import React from "react";
import { Navbar, Nav, NavDropdown } from "react-bootstrap";
import { Link } from "react-router-dom";

class Sidebar extends React.Component {
  render() {
    return (
      <Navbar bg="light" expand="lg">
        <Navbar.Brand href="#home">React Sidebar</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="mr-auto">
            <Nav.Link as={Link} to="/">Home</Nav.Link>
            <Nav.Link as={Link} to="/about">About</Nav.Link>
            <NavDropdown title="Dropdown" id="basic-nav-dropdown">
              <NavDropdown.Item as={Link} to="/dropdown/one">Option 1</NavDropdown.Item>
              <NavDropdown.Item as={Link} to="/dropdown/two">Option 2</NavDropdown.Item>
              <NavDropdown.Divider />
              <NavDropdown.Item as={Link} to="/dropdown/three">Option 3</NavDropdown.Item>
            </NavDropdown>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    );
  }
}

export default Sidebar;

在此代码中，我们使用了 Navbar、Nav 和 NavDropdown 组件来创建响应式侧边栏。Link 组件用于将导航菜单项链接到相应的路由。

步骤 3 - 添加自定义样式

现在，我们已经创建了响应式侧边栏组件。我们需要添加一些自定义样式使其看起来更好。在 src 文件夹中创建一个名为 styles.css 的文件，并添加以下代码：

.sidebar {
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #f8f9fa;
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
}

.sidebar-brand {
    padding: 1rem;
    font-size: 1.5rem;
    text-align: center;
}

.sidebar-link {
    padding: 0.5rem 1rem;
}

.sidebar-link:hover {
    background-color: #e9ecef;
}

在此代码中，我们为侧边栏及其导航菜单项添加了样式。

步骤 4 - 将侧边栏添加到应用程序中

我们已经定义了侧边栏组件，并添加了自定义样式。现在，我们需要将该组件添加到应用程序中。

在 src 文件夹中创建一个名为 App.js 的文件，并添加以下代码：

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Sidebar from "./components/Sidebar";
import Home from "./pages/Home";
import About from "./pages/About";
import DropdownOne from "./pages/DropdownOne";
import DropdownTwo from "./pages/DropdownTwo";
import DropdownThree from "./pages/DropdownThree";
import "./styles.css";

class App extends React.Component {
  render() {
    return (
      <Router>
        <div className="d-flex">
          <div className="sidebar">
            <Sidebar />
          </div>
          <div className="flex-grow-1">
            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
            <Route path="/dropdown/one" component={DropdownOne} />
            <Route path="/dropdown/two" component={DropdownTwo} />
            <Route path="/dropdown/three" component={DropdownThree} />
          </div>
        </div>
      </Router>
    );
  }
}

export default App;

在此代码中，我们将侧边栏组件添加到应用程序中，并将路由与相应的页面组件进行了匹配。

步骤 5 - 运行应用程序

现在，我们已经完成了所有步骤。运行以下命令以启动应用程序：

npm start

现在，访问 http://localhost:3000 即可看到我们创建的响应式侧边栏。

结论

在本文中，我们介绍了如何在 ReactJS 中创建带有下拉菜单的响应式侧边栏。我们使用了 React Bootstrap 来创建响应式侧边栏，并使用 CSS 来自定义样式。如果您遇到任何问题，请随时在评论中与我们联系。