如何通过array.map添加带ListItemIcon的MenuItem元素（Material-UI v1.0.0-beta.38）

这个场景在后台类项目里特别常见，用数组map生成菜单的思路完全可行，我给你整理了完整的实现方案，直接就能复用：

第一步：导入所需组件 #

先确保你已经导入了Material-UI的核心组件和需要的图标：

import React from 'react';
import MenuItem from '@material-ui/core/MenuItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
// 导入你需要的图标组件
import SettingsIcon from '@material-ui/icons/Settings';
import DashboardIcon from '@material-ui/icons/Dashboard';

第二步：定义菜单数据数组 #

把菜单的图标、文本（以及你后续要加的其他数据）统一存在数组里，注意这里图标存的是组件类，不是JSX元素：

const menuItems = [
  { icon: DashboardIcon, text: '仪表盘' },
  { icon: SettingsIcon, text: '设置' },
  // 后续可以继续扩展更多字段，比如路由地址、点击事件
  { icon: /* 其他图标组件 */, text: '用户管理', path: '/users' }
];

第三步：通过map渲染菜单 #

在组件里遍历数组生成对应的MenuItem，核心是把数组里的图标组件当成React组件来渲染（用<item.icon />的方式实例化）：

const AppMenu = () => {
  return (
    <div>
      {menuItems.map((item) => (
        <MenuItem button key={item.text}>
          <ListItemIcon>
            {/* 直接渲染数组中的图标组件 */}
            <item.icon />
          </ListItemIcon>
          <ListItemText primary={item.text} />
          {/* 如果有副标题，可添加secondary={item.subText} */}
        </MenuItem>
      ))}
    </div>
  );
};

export default AppMenu;

关键细节说明 #

• 你之前直接写JSX能运行，是因为<SettingsIcon />是直接创建了组件实例；而数组里存的是组件类（比如SettingsIcon），所以在map时需要用<item.icon />的方式来实例化它。
• 关于key：优先用每个菜单项的唯一标识（比如item.text如果唯一的话），如果没有唯一值，用index兜底，但不推荐在动态增减的列表里用index当key。
• 扩展功能：如果需要给菜单项加点击事件、路由跳转，直接在数组里加对应字段即可：

  // 数组里添加点击事件字段
  const menuItems = [
    { icon: SettingsIcon, text: '设置', onClick: () => console.log('打开设置面板') }
  ];
  
  // 渲染时绑定事件
  <MenuItem button key={item.text} onClick={item.onClick}>
    {/* ... */}
  </MenuItem>
  

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