react实现菜单切换

使用状态管理实现菜单切换

在React中，可以通过useState钩子管理菜单的展开/折叠状态。定义一个状态变量（如isMenuOpen）和对应的更新函数，通过点击事件切换状态。

import React, { useState } from 'react';

function Menu() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsMenuOpen(!isMenuOpen)}>
        {isMenuOpen ? '收起菜单' : '展开菜单'}
      </button>
      {isMenuOpen && (
        <ul>
          <li>菜单项1</li>
          <li>菜单项2</li>
        </ul>
      )}
    </div>
  );
}

结合CSS过渡动画

通过CSS类名动态控制菜单的显示与隐藏，并添加过渡效果。定义.menu-active和.menu-inactive类，分别对应展开和收起状态。

import React, { useState } from 'react';
import './Menu.css';

function Menu() {
  const [isActive, setIsActive] = useState(false);

  return (
    <div>
      <button onClick={() => setIsActive(!isActive)}>
        切换菜单
      </button>
      <ul className={`menu ${isActive ? 'menu-active' : 'menu-inactive'}`}>
        <li>选项1</li>
        <li>选项2</li>
      </ul>
    </div>
  );
}

CSS示例：

.menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.menu-active {
  max-height: 200px;
}

使用第三方库（如React-Transition-Group）

对于复杂的动画效果，可以借助react-transition-group库实现更精细的控制。通过CSSTransition组件包裹菜单内容，定义进入/退出的动画类名。

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

function Menu() {
  const [showMenu, setShowMenu] = useState(false);

  return (
    <div>
      <button onClick={() => setShowMenu(!showMenu)}>
        切换菜单
      </button>
      <CSSTransition
        in={showMenu}
        timeout={300}
        classNames="menu"
        unmountOnExit
      >
        <ul className="menu">
          <li>首页</li>
          <li>关于</li>
        </ul>
      </CSSTransition>
    </div>
  );
}

配套CSS：

.menu-enter {
  opacity: 0;
  transform: translateY(-20px);
}
.menu-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: all 300ms;
}
.menu-exit {
  opacity: 1;
}
.menu-exit-active {
  opacity: 0;
  transform: translateY(-20px);
  transition: all 300ms;
}

多级嵌套菜单实现

通过递归组件或状态嵌套处理多级菜单。每个子菜单维护自身的展开状态，通过map动态渲染层级结构。

function SubMenu({ items }) {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <li>
      <span onClick={() => setIsOpen(!isOpen)}>
        {items.title} {isOpen ? '▼' : '►'}
      </span>
      {isOpen && items.children && (
        <ul>
          {items.children.map((child, index) => (
            <SubMenu key={index} items={child} />
          ))}
        </ul>
      )}
    </li>
  );
}

function NestedMenu() {
  const menuData = [
    {
      title: '一级菜单',
      children: [
        { title: '二级菜单A' },
        { title: '二级菜单B', children: [{ title: '三级菜单' }] },
      ],
    },
  ];

  return (
    <ul>
      {menuData.map((item, index) => (
        <SubMenu key={index} items={item} />
      ))}
    </ul>
  );
}

与路由结合（React Router）

在菜单项中集成路由跳转功能，使用Link组件替代普通<a>标签，实现无刷新页面切换。

import { Link } from 'react-router-dom';

function NavMenu() {
  return (
    <ul>
      <li><Link to="/home">首页</Link></li>
      <li><Link to="/about">关于</Link></li>
    </ul>
  );
}