当前位置：首页 > React

react如何循环菜单

2026-01-23 19:05:53React

循环渲染菜单的方法

在React中循环渲染菜单通常使用map方法遍历数组数据，动态生成菜单项。以下是几种常见实现方式：

react如何循环菜单

使用数组map方法

const menuItems = ['首页', '产品', '关于', '联系我们'];

function Menu() {
  return (
    <ul>
      {menuItems.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

处理复杂菜单数据结构

当菜单结构较复杂时，可以使用对象数组：

react如何循环菜单

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

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

嵌套菜单实现

对于多级菜单，可以使用递归组件：

const menuData = [
  {
    title: '产品',
    children: [
      { title: '产品1', path: '/product1' },
      { title: '产品2', path: '/product2' }
    ]
  },
  {
    title: '服务',
    children: [
      { title: '服务1', path: '/service1' },
      { title: '服务2', path: '/service2' }
    ]
  }
];

function MenuItem({ item }) {
  return (
    <li>
      {item.path ? (
        <a href={item.path}>{item.title}</a>
      ) : (
        <span>{item.title}</span>
      )}
      {item.children && (
        <ul>
          {item.children.map(child => (
            <MenuItem key={child.title} item={child} />
          ))}
        </ul>
      )}
    </li>
  );
}

function Menu() {
  return (
    <ul>
      {menuData.map(item => (
        <MenuItem key={item.title} item={item} />
      ))}
    </ul>
  );
}

使用UI库实现菜单

结合Material-UI等UI库的菜单组件：

import { Menu, MenuItem } from '@mui/material';

const items = ['首页', '产品', '关于'];

function AppMenu() {
  return (
    <Menu>
      {items.map((item, index) => (
        <MenuItem key={index}>{item}</MenuItem>
      ))}
    </Menu>
  );
}