React点击切换active类实现移动端侧边栏显隐问题求助

问题排查与修复 #

你代码中存在3个核心错误，修改后即可正常运行：

• className属性逻辑错误且带多余符号：React的className不需要加CSS选择器的前缀.，同时类名切换逻辑完全写反，active状态为真时才需要追加active类
• 侧边栏关闭按钮未绑定点击事件：点击叉号无法触发状态切换
• CSS存在拼写错误与无效属性：媒体查询中把类名sidebar_inner错写为sidebar__inner，且.wrapper.active的right:100%是无效属性，不符合布局逻辑

修复后的React组件代码 #

import StyledLink from './styled'
import React, { useState } from 'react';

const SideBar = () =>{
const [active, setActive] = useState(false)

      return (
        <>
          {/* 修正className逻辑，去掉多余的. */}
          <div className={active ? "wrapper active" : "wrapper"}>
              <div className="sidebar">
                <div className="bg-shadow"></div>
                    <div className="sidebar_inner">
                    {/* 给关闭按钮绑定点击事件，点击后隐藏侧边栏 */}
                    <div className="close" onClick={() => setActive(false)}>
                    <i className="fas fa-times" aria-hidden="true"></i>
                    </div>
                    <div className="profile_info">
                       <div className="profile_img">
                         <img src="" alt="profile_pic"/>
                          </div>
                         <div className="profile_data">
                        <div className="name">Tina Makri </div>
                        <div className="role">Full-Stack Developer </div>

                     </div>
                    </div>
                    <ul className="sidebar_menu">
                    <StyledLink to="/">
                    <div className="title">Home </div>
                    </StyledLink>

                    <StyledLink to="/about " >
                    <div className="title">About</div>
                    </StyledLink>

                    <StyledLink to="/project">
                    <div className="title">Projects </div>
                    </StyledLink>

                    <StyledLink to="/contact">
                    <div className="title">Contact </div>
                    </StyledLink>
                    </ul>
                      </div>
              </div>
              <div className="main_container">
              <div className="top_navbar">
                <div className="hamburger" >
                    <div className="hamburger__inner " >

                  <button id="menuToggler" onClick={() => setActive(!active)}>  <i className="fas fa-bars" aria-hidden="true"></i></button>

                    </div>

                </div>
                </div>
              </div>
          </div>
        </>
      );
    }


export default SideBar;

修复后的CSS代码 #

*{
  list-style: none;
  text-decoration: none !important;
}
.wrapper{
  display:flex;
  width: 100%;
}
.wrapper .sidebar{
  position: relative;
}
.wrapper .sidebar .sidebar_inner{
  width :250px;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  background-color:red;
  z-index: 999;
  transition: all 0.3s ease;
}
.main_container{
  margin-left:250px;
  width: calc(100% - 250px);
  transition: all 0.3s ease;
}
.wrapper .sidebar_inner .profile_info{
  padding: 30px 50px;
  text-align: center;
}

.wrapper .sidebar_inner .profile_info .profile_img{
  width: 125px;
  margin:0 auto 15px;
}
.wrapper .sidebar_inner .profile_info .profile_img img{
  width: 100%;
  display: block;
}
.wrapper .sidebar_inner .profile_info .profile_data .name{
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}
.wrapper .sidebar_inner .profile_info .profile_data .role{
  font-weight: 300;
  color:#88a3d0;
  margin-bottom: 15px;
}


.wrapper .main_container .top_navbar{
  width: calc(100% - 250px);
  height: 60px;
  background-color:  #923baa;
  display: flex;
  justify-content: space-between;
  padding: 15px 25px;
  position: fixed;
  top:0;
  left:250px;
  transition: all 0.3s ease;
}
.wrapper .main_container .top_navbar .hamburger{
  width: 30px;
  height: 30px;
  position: relative;
  display: none;

}
.wrapper .main_container .top_navbar .hamburger .fa-bars{
  color:white !important;
  font-size:25px;
  cursor: pointer;
  position: relative;
  top:50%;
  left:50%;
  transform: translate(-50%,9%);
}
.wrapper .main_container .top_navbar .hamburger .fa-bars:hover{
  opacity:0.5;
}

.wrapper .close{
  position: absolute;
  top:5px;
  right:15px;
  font-size:25px;
  color: #fff;
  cursor: pointer;
display: none;
}
.wrapper .close:hover{
  opacity: 0.5;
}

@media screen and (max-width:800px){
  .wrapper .sidebar .sidebar_inner{
    left:-100%;
  }
  .wrapper .main_container,
  .wrapper .main_container .top_navbar{
    width: 100%;
    margin-left:0;
  }
  .wrapper .main_container .top_navbar{
    left:0;
  }
  .wrapper .main_container .top_navbar .hamburger,
  .wrapper .close {
    display: block;
  }
  /* 修正类名拼写错误 */
  .wrapper.active .sidebar .sidebar_inner{
    left:0;
  }

}

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