Reactjs 从HTML到JS的汉堡菜单

我正在尝试将我的代码从HTML“转换”为ReactJS。我尝试过但无法实现的是这一行代码：

      <div className = "title-bar" data-responsive-toggle = "center_menu">
          <button className = "menu-icon" type = "button" data-toggle></button>
          <div className = "title-bar-title"></div>
      </div>

当我按下汉堡包图标时，会出现“主页、扩展等”列表。在HTML中，我使它工作得很好。ReactJS它没有使用我的数据响应切换中心菜单id。代码应该是什么样子，正确的语法是什么？

---

附言：我是React的新手，我正在尝试学习它。

有几个关于如何做的教程，例如：

---

你也可以使用npm库来达到预期的效果。

我不知道你是想让它看起来一直都很正常，只想在较小的屏幕上显示汉堡，还是一直都是汉堡菜单，但一般来说，对于你所要求的，你需要条件类来在

display:block和
显示：无
并且您需要通过click事件来处理它，因此基本上：

 <div className ="title-bar">
   <button className = "menu-icon" type = "button" onClick={this.toggleMenu}></button>
   <div className = "title-bar-title"></div>
 </div>

<div className={`example-menu ${this.isclicked}?" collapsed-menu": " closed-menu" `}>
  <ul class = "menu dropdown" data-dropdown-menu>
    <li><a href = "#">Home</a>
            ....
    <li><a href = "#">Contact</a></li>
  </ul>
</div>

不用说这两个类
折叠菜单
和
关闭菜单
，它们是这样的：

.collapsed-menu{
  ....
  display:block;
}
.closed-menu{
  ...
  display:none;
}

关于css（媒体查询），您是否为显示指定了最小宽度值？？？
我没有看到任何React代码。是的，我不知道如何执行。请提供您尝试的代码示例、调试详细信息、具体问题、实际和预期结果等。。
.collapsed-menu{
  ....
  display:block;
}
.closed-menu{
  ...
  display:none;
}