Reactjs 从阵列渲染材质UI图标

背景信息：
我正在使用react和material ui。
为了保持代码干净，我从常量数组填充菜单项，如下所示：

const menuItems = [
  { label: "Home", path: "/home" },
  { label: "Accounts", path: "/accounts" },
  { label: "Organizations", path: "/organizations" },
];

数组中的每个项都是一个包含标签和重定向路径的对象。渲染时，我在项目上进行贴图。非常基本

问题：
我希望在menuItems数组中包含一个材质ui图标组件，以便可以在标签旁边呈现图标。但是我找不到通过名称字符串引用图标的方法

可能的解决方案：

将图标组件放入字符串中：

{label:“Accounts”，path:“/Accounts”}，icon:“}

但是我需要在jsx中计算字符串。我不知道怎么做

制作一个react功能组件，根据道具呈现不同的图标，例如：

和硬编码RFC内的不同图标。不漂亮，但应该有用

Punt并使用不同的图标，如svg图标或可由名称字符串引用的字体图标

有什么建议吗？ 谢谢

您可以使用该组件

要使用图标，只需使用图标组件包装图标名称（字体连字），例如：

import Icon from '@material-ui/core/Icon';

<Icon>star</Icon>

然后，您可以在其上绘制地图：

      {menuItems.map(({ label, icon }) => {
        return (
          <span key={label}>
            {label} <Icon>{icon}</Icon>
          </span>
        );
      })}

{menuItems.map（{label，icon}）=>{
返回(
{label}{icon}
);
})}

{label:“Home”，path:“/Home”，icon:}不工作吗？太棒了。这起作用了。只需在index.html文件中包含

，即可获得材质图标字体。--非常感谢。

      {menuItems.map(({ label, icon }) => {
        return (
          <span key={label}>
            {label} <Icon>{icon}</Icon>
          </span>
        );
      })}