React.js移动端汉堡图标（Hamburger icon）不显示问题求助

核心问题分析 #

从你提供的代码来看，导致汉堡图标视觉不可见但功能正常的原因主要有以下几点：

1. React JSX语法错误

   • button标签使用了Vue风格的@click绑定，React中正确的点击事件属性是onClick，且值应为函数引用而非模板字符串。
   • button标签用了class属性，React JSX中必须用className指定样式类，否则bg-ubx-red、w-10、h-8等样式完全不生效，导致button尺寸、背景色不符合预期，汉堡图标可能因超出范围或颜色融合而隐藏。

2. 汉堡图标布局冗余与重叠

   • 你用4个span实现汉堡线，但第2、3个span的top值均为6px，导致两条线完全重叠，虽不影响功能，但可能在部分场景下引发显示异常。

3. 汉堡图标超出button可视范围

   • 汉堡div设置了top:4px和margin:10px 0 -1px 10px，加上自身16px高度，总占用高度达30px，而button的h-8类通常对应24px高度，若button默认开启overflow:hidden，汉堡图标会被截断甚至完全隐藏。

修复方案 #

1. 修正React语法错误

将button标签的class改为className，替换@click为React标准的onClick：

<button className="showMobileMenu inline-block bg-ubx-red text-xxl py-4 px-0 cursor-pointer outline-none focus-outline-none z-50 relative outline-none focus-outline-none text-white w-10 h-8 mobiMenuToggleIsActive xl-hidden" onClick={this._handleShowMenuClick}>
  <div className="hamburger hamburger-btn">
    <span></span>
    <span></span>
    <span></span>
  </div>
</button>

2. 优化汉堡图标布局

删除冗余span，保留3个span实现标准汉堡线，并调整CSS中的top值：

.hamburger span {
  background: #1a1a1a;
  border-radius: 2px;
  display: block;
  height: 2px;
  left: 0;
  position: absolute;
  transform: rotate(0deg);
  transition: transform .25s ease-in-out;
  width: 100%
}

.hamburger span:first-child {
  top: 0
}

.hamburger span:nth-child(2) {
  top: 6px
}

.hamburger span:nth-child(3) {
  top: 12px
}

/* 同步调整active状态样式 */
.hamburger.active span:first-child {
  transform: rotate(45deg);
  top: 6px;
}

.hamburger.active span:nth-child(2) {
  width: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg);
  top: 6px;
}

3. 调整汉堡位置避免溢出

修改汉堡div的margin和top值，确保其在button内部居中显示：

.hamburger {
  cursor: pointer;
  height: 16px;
  margin: auto; /* 居中 */
  position: relative;
  top: 0;
  transform: scale(1.1);
  width: 20px;
  z-index: 100;
}

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