从数组中渲染 Ant 设计图标

Question

背景资料：

我正在使用 react 和 Ant 设计。

为了保持代码干净，我从一个 const 数组填充菜单项，如下所示：

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

数组中的每一项都是一个 object，其中包含一个 label 和一个重定向路径。 I map 在渲染时覆盖了项目。 很基础。

问题：

我想在 menuItems 数组中包含一个 antd 图标组件，以便可以在 label 旁边呈现该图标。 但我找不到通过名称字符串引用图标的方法

我的问题就像这个问题，但是 ant 设计从数组中渲染 Material-UI 图标

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

Answer 1

您可以将 menuItems 修改为以下内容：

 const menuItems = [
    { label: "Home", path: "/home", icon: <span class="custom-icon" /> },
    {
      label: "Accounts",
      path: "/accounts",
      icon: <span class="custom-icon" />
    },
    {
      label: "Organizations",
      path: "/organizations",
      icon: <span class="custom-icon" />
    }
  ];

而不是使用custom-icon的 class span ，您可以使用您想要的任何图标，然后相应地渲染它