React原生实现menu

React 原生实现菜单

在React中实现菜单功能可以通过多种方式完成，以下是几种常见的方法：

使用状态管理控制菜单显示

通过React的useState钩子管理菜单的显示状态，结合点击事件触发状态变化：

import React, { useState } from 'react';

function Menu() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>Toggle Menu</button>
      {isOpen && (
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
        </ul>
      )}
    </div>
  );
}

添加动画效果

使用CSS过渡或动画库如react-transition-group为菜单添加平滑的显示/隐藏效果：

import { CSSTransition } from 'react-transition-group';

function AnimatedMenu() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>Toggle Menu</button>
      <CSSTransition
        in={isOpen}
        timeout={300}
        classNames="menu"
        unmountOnExit
      >
        <ul className="menu">
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
        </ul>
      </CSSTransition>
    </div>
  );
}

实现下拉菜单

创建一个更复杂的下拉菜单组件，包含子菜单项和点击外部区域关闭功能：

import React, { useState, useRef, useEffect } from 'react';

function DropdownMenu() {
  const [isOpen, setIsOpen] = useState(false);
  const dropdownRef = useRef(null);

  useEffect(() => {
    function handleClickOutside(event) {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
        setIsOpen(false);
      }
    }
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  return (
    <div ref={dropdownRef} className="dropdown">
      <button onClick={() => setIsOpen(!isOpen)}>Dropdown</button>
      {isOpen && (
        <div className="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      )}
    </div>
  );
}

响应式导航菜单

实现一个响应式的导航菜单，在小屏幕上显示汉堡菜单图标：

function ResponsiveNav() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <nav className="navbar">
      <div className="navbar-brand">
        <button 
          className="menu-icon" 
          onClick={() => setIsOpen(!isOpen)}
        >
          ☰
        </button>
      </div>
      <div className={`navbar-links ${isOpen ? 'active' : ''}`}>
        <a href="/">Home</a>
        <a href="/about">About</a>
        <a href="/contact">Contact</a>
      </div>
    </nav>
  );
}

可访问性考虑

确保菜单具有良好的可访问性，包括键盘导航和ARIA属性：

function AccessibleMenu() {
  const [isOpen, setIsOpen] = useState(false);
  const menuRef = useRef(null);

  function handleKeyDown(e) {
    if (e.key === 'Escape') {
      setIsOpen(false);
    }
  }

  return (
    <div 
      ref={menuRef} 
      onKeyDown={handleKeyDown}
      aria-haspopup="true"
      aria-expanded={isOpen}
    >
      <button 
        onClick={() => setIsOpen(!isOpen)}
        aria-controls="menu-list"
      >
        Menu
      </button>
      {isOpen && (
        <ul id="menu-list" role="menu">
          <li role="menuitem" tabIndex="0">Option 1</li>
          <li role="menuitem" tabIndex="0">Option 2</li>
          <li role="menuitem" tabIndex="0">Option 3</li>
        </ul>
      )}
    </div>
  );
}

这些实现方法可以根据具体需求进行组合和扩展，创建出功能完善、用户体验良好的菜单组件。