当前位置：首页 > React

react如何动态渲染菜单

2026-03-10 17:05:47React

动态渲染菜单的实现方法

在React中动态渲染菜单通常需要结合数据驱动的方式，通过状态管理或API获取菜单数据，再通过循环渲染组件。以下是具体实现方案：

使用数组映射渲染菜单项

假设有一个菜单数据数组，可以通过map方法动态生成菜单项：

const menuItems = [
  { id: 1, name: '首页', path: '/' },
  { id: 2, name: '产品', path: '/products' },
  { id: 3, name: '关于', path: '/about' }
];

function Navigation() {
  return (
    <nav>
      <ul>
        {menuItems.map(item => (
          <li key={item.id}>
            <a href={item.path}>{item.name}</a>
          </li>
        ))}
      </ul>
    </nav>
  );
}

从API获取动态菜单数据

实际应用中，菜单数据可能来自后端API：

import { useState, useEffect } from 'react';

function DynamicMenu() {
  const [menuItems, setMenuItems] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('/api/menu')
      .then(res => res.json())
      .then(data => {
        setMenuItems(data);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>加载中...</div>;

  return (
    <ul>
      {menuItems.map(item => (
        <MenuItem key={item.id} item={item} />
      ))}
    </ul>
  );
}

function MenuItem({ item }) {
  return <li><a href={item.path}>{item.name}</a></li>;
}

支持多级嵌套菜单

对于有子菜单的复杂结构，可以使用递归组件：

const nestedMenu = [
  {
    id: 1,
    name: '产品',
    children: [
      { id: 11, name: '软件' },
      { id: 12, name: '硬件' }
    ]
  }
];

function NestedMenu({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>
          {item.name}
          {item.children && <NestedMenu items={item.children} />}
        </li>
      ))}
    </ul>
  );
}

结合路由的动态菜单

在React Router应用中，可以创建与路由配置同步的菜单：

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

const routes = [
  { path: '/', name: '首页' },
  { path: '/dashboard', name: '仪表盘' }
];

function RouterMenu() {
  return (
    <nav>
      {routes.map(route => (
        <Link key={route.path} to={route.path}>
          {route.name}
        </Link>
      ))}
    </nav>
  );
}

菜单状态管理

对于需要展开/折叠的菜单，可以使用状态管理：

react如何动态渲染菜单

function CollapsibleMenu() {
  const [expandedItems, setExpandedItems] = useState({});

  const toggleItem = id => {
    setExpandedItems(prev => ({
      ...prev,
      [id]: !prev[id]
    }));
  };

  return (
    <ul>
      {menuData.map(item => (
        <li key={item.id}>
          <div onClick={() => toggleItem(item.id)}>
            {item.name}
            {item.children && <span>{expandedItems[item.id] ? '▼' : '▶'}</span>}
          </div>
          {item.children && expandedItems[item.id] && (
            <ul>
              {item.children.map(child => (
                <li key={child.id}>{child.name}</li>
              ))}
            </ul>
          )}
        </li>
      ))}
    </ul>
  );
}