从数组中渲染 Ant Design 图标

Question

背景资料：

我正在使用 react 和 Ant Design。

为了保持代码简洁，我从常量数组填充菜单项，如下所示：

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

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

问题：

我想在 menuItems 数组中包含一个 antd 图标组件，以便可以在标签旁边呈现图标。但是我找不到通过名称字符串

引用图标的方法

我的问题和这个问题一样但是是ant design

关于如何做到这一点有什么建议吗？谢谢

Answer 1

您可以将菜单项修改为如下内容：

 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" />
    }
  ];

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

从数组中渲染 Ant Design 图标

Rendering Ant Design icons from an array

javascript

reactjs

antd