Javascript 如何从预定义对象渲染Ant设计图标

我有一个列出菜单项的文件，如图所示

import React from "react";
import { Link, useRouteMatch } from "react-router-dom";
import {
  HomeOutlined,
  ProjectOutlined,
  DatabaseOutlined,
  RocketOutlined,
  SettingOutlined,
  FormatPainterOutlined,
} from "@ant-design/icons";

import { Menu } from "antd";

const { SubMenu } = Menu;

const stripTrailingSlash = (str) => {
  if (str.substr(-1) === "/") {
    return str.substr(0, str.length - 1);
  }
  return str;
};
export default React.memo(function SiderMenu({ singleOption, ...rest }) {
  let match = useRouteMatch();

  const { key, label, leftIcon, children } = singleOption;


  const url = stripTrailingSlash(match.url);


  return (
    <Menu.Item key={key} {...rest} icon={leftIcon}>
      <Link to={`${url}/${key}`}>{label}</Link>
    </Menu.Item>
  );
});

---

我试图在菜单中显示Ant设计图标。Item Icon={leftIcons}来自对象，但它显示为纯文本。有没有办法从对象渲染图标？

道具图标需要的是react对象而不是字符串值。你能做的就是像这样渲染你的图标

import { Icon} from 'antd';


<Menu.Item key={key} {...rest} icon={<Icon type={leftIcon} />}>
      <Link to={`${url}/${key}`}>{label}</Link>
</Menu.Item>

从“antd”导入{Icon}；
{label}

在antd 4.x.x上，如果不使用antd compatible，您可以执行以下操作

const options = [
  {
    key: "home",
    label: "Home",
    leftIcon: <HomeOutlined />,
  },
  {
    key: "project",
    label: "Projects",
    leftIcon: <ProjectOutlined />,
  },
  {
    key: "data",
    label: "My Data",
    leftIcon: <DatabaseOutlined />,
  },
  {
    key: "finished",
    label: "Compiled Data",
    leftIcon: <RocketOutlined />,
  },
  {
    key: "settings",
    label: "Settings",
    leftIcon: <SettingsOutlined />,
  },
];

const选项=[
{
钥匙：“家”，
标签：“主页”，
左图标：，
},
{
关键：“项目”，
标签：“项目”，
左图标：，
},
{
密钥：“数据”，
标签：“我的数据”，
左图标：，
},
{
关键：“完成”，
标签：“编译数据”，
左图标：，
},
{
键：“设置”，
标签：“设置”，
左图标：，
},
];

---

而不是字符串。

哦，非常感谢！我使用的是antd v4.x.x，因此我必须安装与使用此方法兼容的antd。它就像一个符咒！

const options = [
  {
    key: "home",
    label: "Home",
    leftIcon: <HomeOutlined />,
  },
  {
    key: "project",
    label: "Projects",
    leftIcon: <ProjectOutlined />,
  },
  {
    key: "data",
    label: "My Data",
    leftIcon: <DatabaseOutlined />,
  },
  {
    key: "finished",
    label: "Compiled Data",
    leftIcon: <RocketOutlined />,
  },
  {
    key: "settings",
    label: "Settings",
    leftIcon: <SettingsOutlined />,
  },
];