如何在React中使用aria-expanded属性实现导航栏切换？

在React中，所有DOM属性（包括aria-*系列）都需要通过**状态(state)**来管理，不能直接操作DOM修改属性。以下是针对你问题的具体解决方法：

核心实现思路 #

• 用React的useState钩子维护导航展开状态isNavExpanded，初始值设为false（对应折叠状态）
• 给导航切换按钮绑定点击事件，触发状态反转
• 将状态值直接绑定到按钮的aria-expanded属性，同时用状态控制导航菜单的显示/隐藏

关键代码示例 #

import { useState } from 'react';

function Navbar() {
  // 初始化导航折叠状态
  const [isNavExpanded, setIsNavExpanded] = useState(false);

  // 切换导航展开/折叠的函数
  const toggleNavigation = () => {
    setIsNavExpanded(prevState => !prevState);
  };

  return (
    <nav className="your-navbar-class">
      {/* 导航切换按钮 */}
      <button
        className="navbar-toggle-btn"
        aria-label="切换导航菜单"
        aria-expanded={isNavExpanded} // 绑定状态到aria-expanded属性
        onClick={toggleNavigation}
      >
        {/* 汉堡图标 */}
        <span className="hamburger-icon"></span>
      </button>

      {/* 导航菜单区域 */}
      <div
        className={`navbar-menu ${isNavExpanded ? 'menu-expanded' : 'menu-collapsed'}`}
        aria-hidden={!isNavExpanded} // 配合aria-expanded提升无障碍体验
      >
        {/* 导航链接 */}
        <a href="/" className="nav-link">首页</a>
        <a href="/about" className="nav-link">关于我们</a>
        <a href="/contact" className="nav-link">联系我们</a>
      </div>
    </nav>
  );
}

export default Navbar;

重要细节说明 #

• 状态驱动属性：React会在状态更新时自动同步aria-expanded的DOM属性值，完全替代手动操作DOM的方式
• 无障碍增强：添加aria-hidden属性，当菜单折叠时告知屏幕阅读器该区域不可见，符合WCAG无障碍标准
• 类名动态切换：通过状态值给菜单添加/移除展开类，实现视觉上的显示与隐藏，这是React中控制元素样式的标准方式
• 避免直接操作DOM：不要使用document.getElementById或ref直接修改aria-expanded，遵循React的状态管理模式才能保证组件的可维护性和一致性

针对你现有代码的调整提示 #

1. 确保已引入useState钩子
2. 移除所有手动修改aria-expanded的原生DOM操作代码
3. 将导航菜单的显示逻辑与isNavExpanded状态绑定
4. 确认切换按钮的点击事件已关联状态切换函数

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