TypeScript中响应式菜单按钮的类型适配与调用问题

1. 修正TypeScript类型兼容的菜单切换函数 #

原JavaScript函数直接在TS中使用会存在三类类型问题：参数无类型约束、按钮name属性类型未声明、DOM元素可能为null的运行时风险。修改后的TS兼容版本如下：

function handleMenuToggle(e: MouseEvent<HTMLButtonElement>) {
  // 明确当前点击按钮的元素类型
  const toggleButton = e.currentTarget as HTMLButtonElement;
  // 获取菜单列表并做非空判断，避免DOM不存在时报错
  const menuList = document.querySelector('ul');

  if (!menuList) return;

  // 切换按钮状态与菜单样式
  if (toggleButton.name === 'menu') {
    toggleButton.name = 'close';
    menuList.classList.add('top-[80px]', 'opacity-100');
  } else {
    toggleButton.name = 'menu';
    menuList.classList.remove('top-[80px]', 'opacity-100');
  }
}

2. 正确绑定按钮的点击事件 #

需要给按钮添加初始name属性（值为menu），并将修正后的函数绑定到onClick事件：

<button 
  className={styles.burgerButton}
  name="menu"
  onClick={handleMenuToggle}
>
  {/* 可根据按钮name值切换图标，比如菜单/关闭SVG */}
</button>

3. 实现响应式显示/隐藏按钮 #

通过CSS媒体查询实现大屏隐藏、小屏显示的效果：

/* 样式文件中添加 */
.burgerButton {
  display: block;
}

/* 屏幕宽度大于768px时隐藏按钮 */
@media (min-width: 768px) {
  .burgerButton {
    display: none;
  }
}

如果使用Tailwind CSS，可直接通过工具类简化实现：

<button 
  className={`${styles.burgerButton} block md:hidden`}
  name="menu"
  onClick={handleMenuToggle}
>
  {/* 图标内容 */}
</button>

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