背景信息:
我正在使用 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/
可能的解决方案:
{ label: "Accounts", path: "/accounts" }, icon: "<AccountBox/>"}
但后来我不知何故需要将字符串评估为 jsx。我不知道怎么做<IconSwitch icon = {"accountIcon"} />
并在 RFC 中硬编码不同的图标。不漂亮,但应该工作。关于如何做到这一点的任何建议?
谢谢
最佳答案
图标字体
您可以使用 Icon
成分。 https://material-ui.com/components/icons/#icon-font-icons
To use an icon simply wrap the icon name (font ligature) with the Icon component, for example:
import Icon from '@material-ui/core/Icon'; <Icon>star</Icon>
https://codesandbox.io/s/material-demo-forked-sj66h?file=/demo.tsx
假设您使用适当的图标连字设置菜单项:
const menuItems = [
{ label: "Home", path: "/home", icon: "home" },
{ label: "Accounts", path: "/accounts", icon: "account_circle" },
{ label: "Organizations", path: "/organizations", icon: "settings" }
];
然后你可以映射它们: {menuItems.map(({ label, icon }) => {
return (
<span key={label}>
{label} <Icon>{icon}</Icon>
</span>
);
})}
SVG 图标
如果您想使用 SVG 图标而不是基本图标,我建议您只提取您计划使用的 SVG 图标,以允许您不使用的图标从生成的包中摇树。摇树的能力是在字体图标上使用 SVG 图标的一个很好的理由。
import { Home, AccountCircle, Settings, AddCircle } from "@material-ui/icons";
如果您想允许用户输入所有图标或不知道将显示哪些图标,您可以从 @material-ui/icons
导入所有内容。如 Jonathan's answer .如果您没有将图标列表放入需要能够字符串化的内容中(即 Redux/通过 API 调用发送),那么您可以直接将图标放入数组中并呈现它们:
const menuItems: MenuItem[] = [
{ label: "Home", path: "/home", icon: <Home /> },
{ label: "Accounts", path: "/accounts", icon: <AccountCircle /> },
{ label: "Organizations", path: "/organizations", icon: <Settings /> }
];
// Rendering:
{menuItems.map(({ label, icon }) => {
return (
<span key={label}>
{label} {icon}
</span>
);
})}
如果您要将图标放在需要字符串化的地方,上面的方法将不起作用,因此我建议将您要使用的图标放入对象中以映射它们。这样你就有了一个图标映射的字符串。示例:https://codesandbox.io/s/material-icons-svg-udcv3?file=/demo.tsx
import { Home, AccountCircle, Settings, AddCircle } from "@material-ui/icons";
const icons = {
Home,
AccountCircle,
Settings
};
在上面的例子中(即从数组中渲染图标)interface MenuItem {
label: string;
path: string;
icon: keyof typeof icons;
}
const menuItems: MenuItem[] = [
{ label: "Home", path: "/home", icon: "Home" },
{ label: "Accounts", path: "/accounts", icon: "AccountCircle" },
{ label: "Organizations", path: "/organizations", icon: "Settings" }
];
// Rendering:
{menuItems.map(({ label, icon }) => {
const Icon = icons[icon];
return (
<span key={label}>
{label} <Icon />
</span>
);
})}
关于reactjs - 从数组渲染 Material-UI 图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64724027/