Reactjs 切换按钮onClick不会更改我的div的位置

因此，我一直在遵循本教程并将其翻译为react，但我似乎无法切换类名

import React, { useState } from "react"
import styled from "styled-components"

const Navbar = () => {
  const [active, setActive] = useState("burger")

  const showSideBar = () => {
    setActive("nav-active")
  }
  return (
    <Wrapper>
      <div className="logo">Logo</div>
      <div className="nav">
        <ul className="nav-links">
          <li>Home</li>
          <li>About</li>
          <li>Nutrition</li>
          <li>Blog</li>
        </ul>
      </div>
      <div className={active} onClick={showSideBar} role="button">
        <div className="line1"></div>
        <div className="line2"></div>
        <div className="line3"></div>
      </div>
    </Wrapper>
  )
}

  const Wrapper = styled.nav`
  @import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
  margin: 0px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  min-height: 8vh;
  color: #2ec1ac;
  font-family: "Poppins", sans-serif;

  .logo {
    font-size: 30px;
    text-align: left;
  }
  .nav-links {
    display: flex;
    justify-content: space-around;
    text-decoration: none;
  }

  li {
    list-style: none;
  }
  .nav {
    width: 40%;
  }

  .line1,
  .line2,
  .line3 {
    width: 25px;
    height: 3px;
    background-color: #2ec1ac;
    margin: 5px;
  }
  .burger {
    margin-top: 10px;
    display: none;
  }

  @media screen and (max-width: 1024px) {
    .nav {
      width: 60%;
      font-size: 23px;
    }
  }

  @media screen and (max-width: 768px) {
    overflow-x: hidden;
    .nav {
      position: absolute;
      right: 0px;
      height: 120vh;
      top: 20vh;
      background-color: #2ec1ac;
      color: #fff;
      width: 50%;
      transform: translateX(100%);
      transition: transform 0.5s ease-in;
    }

    ul {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
    }
    li {
      padding: 10%;
      opacity: 0;
    }
    .burger {
      display: block;
    }

    .nav-active {
      nav {
        transform: translateX(100%);
      }
      li {
        opacity: 1;
      }
    }
  }

import React，{useState}来自“React”
从“样式化组件”导入样式化
常量导航栏=（）=>{
const[active，setActive]=useState（“burger”）
const showSideBar=（）=>{
设置激活（“导航激活”）
}
返回(
标志

家
关于
营养
博客

)
}
const Wrapper=styled.nav`
@导入url（“https://fonts.googleapis.com/css2?family=Poppins&display=swap");
边际：0px；
框大小：边框框；
显示器：flex；
证明内容：周围的空间；
最小高度：8vh；
颜色：#2ec1ac；
字体系列：“罂粟花”，无衬线；
.标志{
字体大小：30px；
文本对齐：左对齐；
}
.导航链接{
显示器：flex；
证明内容：周围的空间；
文字装饰：无；
}
李{
列表样式：无；
}
.导航{
宽度：40%；
}
.line1，
.line2，
.line3{
宽度：25px；
高度：3倍；
背景色：#2ec1ac；
保证金：5px；
}
.汉堡{
边缘顶部：10px；
显示：无；
}
@媒体屏幕和屏幕（最大宽度：1024px）{
.导航{
宽度：60%；
字体大小：23px；
}
}
@媒体屏幕和屏幕（最大宽度：768px）{
溢出x：隐藏；
.导航{
位置：绝对位置；
右：0px；
高度：120vh；
顶部：20vh；
背景色：#2ec1ac；
颜色：#fff；
宽度：50%；
转化：translateX（100%）；
过渡：0.5s轻松过渡；
}
保险商实验室{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：周围的空间；
}
李{
填充：10%；
不透明度：0；
}
.汉堡{
显示：块；
}
.导航激活{
导航{
转化：translateX（100%）；
}
李{
不透明度：1；
}
}
}

我只是想在react中创建一个侧边栏，当单击时它应该滑回到视图中，但即使在类切换时它仍然保持不变。我创建了一个函数，onClick它会更改div的类名，但我似乎无法让它工作。

---

`

类名应该已经在切换了，但是基于CSS，看起来您应该将

活动状态作为
类名
放置到
而不是此元素

你能补充一下吗？
<div className={`nav ${active}`}>
    <ul className="nav-links">
      <li>Home</li>
        ...

.nav-active {
  transform: translateX(0%);
}