从HTML到ReactJS的汉堡菜单

问题描述

我正在尝试将我的代码从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并没有使用我的数据响应切换center_menu id。代码应如何看待，正确的语法是什么？附注：我是React的新手，我正在尝试学习它。

解决方法

有关如何执行此操作的一些教程，例如此处：https://css-tricks.com/hamburger-menu-with-a-side-of-react-hooks-and-styled-components/

此外，您可以使用npm库获得预期的结果。

好吧，我不知道您是否希望它一直看起来正常，只是将汉堡包放在较小的屏幕上，还是一直是汉堡包菜单，但通常来说，您要问的是，实际上需要条件类在display:block;和display:none;之间切换，您需要使用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>

这就是this.toggleMenu的作用：

 toggleMenu() {
    this.setState(state => ({
      isclicked: !state.isclicked
    }));
  }

无需谈论这两个类collapsed-menu和closed-menu，它们将像这样：

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

关于CSS（媒体查询），您是否指定了显示器的最小宽度值？

reactjs reactjs