小编xab*_*bra的帖子

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

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

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

问题：
我想在 menuItems 数组中包含一个 material-ui 图标组件，以便可以在标签旁边呈现图标。但是我找不到通过名称字符串来引用图标的方法
https://material-ui.com/components/material-icons/

可能的解决方案：

1. 将图标组件放入一个字符串中： { label: "Accounts", path: "/accounts" }, icon: "<AccountBox/>"}但是我不知何故需要将该字符串评估为 jsx。我不知道怎么做

2. 制作一个反应功能组件，根据道具呈现不同的图标，例如：<IconSwitch icon = {"accountIcon"} />并在 RFC 内硬编码不同的图标。不漂亮，但应该工作。

3. Punt 和使用不同的图标，例如可以通过名称字符串引用的 svg 图标或字体图标。

关于如何做到这一点的任何建议？谢谢