Reactjs 在React中创建汉堡包菜单

希望这是一个非常简单的问题，但我很难理解为什么会有如此复杂的答案。目前，我正在将一个网站从纯HTML/CSS/JS转换为React。在这里，您有一个示例—一个外部Vanilla JS文件，其中包含打开和关闭汉堡包菜单所需的代码

像这样：

//变量
让line1=document.getElementById（“hamburger-line-1”）；
让line2=document.getElementById（“hamburger-line-2”）；
让hamburger=document.getElementById（“hamburger”）；
让navList=document.getElementById（“汉堡导航列表”）；
//作用
函数hamburgerActive（）{
line1.classList.toggle（“活动”）；
line2.classList.toggle（“活动”）；
navList.classList.toggle（“活动”）；
}
//事件侦听器
hamburger.addEventListener（“单击”，hamburgerActive）您应该使用state，它是为以下内容设计的：

<div className={`myClass toggle ? "active" : ''}></div>

使用如下功能组件：

const Header = () => {

   const [toggle, setToggle] = useState(true) // you could default to false

    return (
// this will toggle the state to be true/false (opposite to the previous one) then
based on that you can add certain classes to either show or hide it

      <header className="universal-header-section" onClick={() => setToggle(!toggle)}>
        <div className="universal-header-container">
          <div className="universal-header-hamburger">
            <div id="hamburger">
              <span id="hamburger-line-1" class=`hamburger-span ${toggle ? 'active' : ''} ` />
              <span id="hamburger-line-2" class=`hamburger-span ${toggle ? 'active' : ''} ` />
            </div>
          </div>
          <div className="universal-header-logo">
            <a href="index">
              <h2>TBC</h2>
            </a>
          </div>
          <div className="universal-header-basket">
            <a href="basket">
              <i className="fas fa-shopping-cart fa-2x"></i>
            </a>
          </div>
        </div>
        <div id="hamburger-nav-list">
          <div class="hamburger-container">

          </div>
        </div>
      </header>
    )
  }
}

const头=（）=>{
const[toggle，setToggle]=useState（true）//可以默认为false
返回(
//这将切换状态为真/假（与前一个相反），然后
基于此，您可以添加某些类来显示或隐藏它
setToggle（！toggle）}>
)
}
}

您可以添加如下所示的新类名：

<div className={`myClass toggle ? "active" : ''}></div>



此代码表示如果
toggle
为true，则将
active
添加到此类，如果不是，则添加“”。因此，您可以将此添加到需要更改的类中，单击
onClick
，谢谢您的帮助-我是一个新的反应者（您可能知道），因此对此不太了解。因此，当你点击汉堡时，我需要添加多个“活动”类。我该怎么做？这一切不都需要在一个作为点击事件添加的函数下进行吗？如果您需要多个，那么您可以重用我在第二个代码段中使用的逻辑。您可以根据需要为任意多个div/元素侦听相同的状态，并根据需要将任意多个div/元素切换为活动或非活动状态。让我在一秒钟内更新代码，所以我在这里添加了它：
`我基本上是说如果
toggle
为真，那么添加
active
类。有道理吗？有道理-谢谢。我希望它能起作用，唯一的问题是setToggle const不起作用-它确实正确吗？在谷歌上看到了一些变化，但只是检查一下，因为你知道你在说什么。当你说不工作时，具体是怎么说的？如果您
console.log（切换）
是否每次单击时都显示true/false？