React应用Sidebar侧边栏点击后无法正常生效问题排查

一共3处代码问题，核心错误集中在SideBar组件的props接收逻辑：

• SideBar组件props接收写法错误：React函数组件入参是所有传入属性组成的对象，你直接将入参命名为SideBar，没有解构出父组件传递的sideBar布尔状态，类名判断时实际判断的是整个props对象（对象转布尔值永远为true），导致开合类名完全不跟随状态变化。
• 根组件切换逻辑写死：toggleSideBar函数固定执行setSideBar(true)，只能打开侧边栏，无法实现点击汉堡按钮切换开关、关闭侧边栏的效果。
• HTML语义不规范：侧边栏内的<li>标签直接放在div容器下，缺少<ul>/<ol>父标签，容易引发不可预期的样式问题。

修正后代码 #

1. SideBar组件 #

import React from 'react'
import './SideBar.css'

// 正确解构props中传入的sideBar状态
export default function SideBar({sideBar}) {
  return (
    // 补充ul父容器，根据sideBar状态正确拼接类名
    <ul className={sideBar ? "side-bar side-bar-open" : "side-bar"}>
        <li>Home</li>
        <li>Contact Us</li>
        <li>About Us</li>
        <li>Add New</li>
    </ul>
  )
}

你原来写的SideBar.css样式逻辑完全正确，不需要修改。

2. App根组件 #

只需要修改toggleSideBar的状态切换逻辑即可，其余代码保持原有结构：

import Singup from "../Authentication/Singup/Singup";
import Dashboar from "../UI/Dashboard";
import Login from "../Authentication/Login/Login";
import { AuthProvider } from "../../context/AuthContext";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Updateprofile from "../Authentication/UpdateProfile/Updateprofile";
import PrivateRoute from "../Authentication/PrivateRoute/PrivateRoute";
import Forgotpassword from "../Authentication/ForgotPassword/Forgotpassword";
import Navbar from "../UI/navbar";
import AboutUs from "../UI/About Us";
import ContactUs from "../UI/Contact Us";
import Addnew from "../UI/Addnew";
import { useState } from 'react'
import SideBar from "../UI/Sidebar/SideBar";

function App() {
  const [sideBar, setSideBar] = useState(false);

  function toggleSideBar(){
    // 取反当前状态，实现点击开关切换
    setSideBar(prev => !prev);
  }

  return (
    <Router>
      <AuthProvider>
        <Navbar openSideBar={toggleSideBar} />
        <SideBar sideBar={sideBar} />
        <Routes>
          <Route exact path="/" element={<Dashboar />} />
          <Route
            path="/update-profile"
            element={
              <PrivateRoute>
                <Updateprofile />
              </PrivateRoute>
            }
          />
          <Route path="/signup" element={<Singup />} />
          <Route path="/login" element={<Login />} />
          <Route path="/forgot-password" element={<Forgotpassword />} />
          <Route path="/about-us" element={<AboutUs />} />
          <Route path="/contact-us" element={<ContactUs />} />
          <Route path="/add-new" element={<Addnew />} />
        </Routes>
      </AuthProvider>
    </Router>
  );
}

export default App;

Navbar组件原有逻辑正确，不需要修改。

备注：你原代码中存在重复导入Dashboard、重复定义/update-profile路由、Singup/Dashboar拼写错误的问题，这些不影响侧边栏功能，但建议后续清理，避免引发路由匹配异常。

内容的提问来源于stack exchange，提问作者smit agravat