如何映射列表并在其中传递@materialui/icons

Question

我想将@material-ui/icons传递到MenuList

首先我申报一份清单：

const notifications = [
{
id: 0,
avatarIcon: "<DashboardIcon/>",
message: "Hey! How is it going?",
time: "9:32",
},
{
id: 1,
avatarIcon: "<MenuIcon/>",
message: "Check out my new Dashboard",
time: "9:18",
},
{
id: 2,
avatarIcon: "<WifiIcon/>",
message: "I want rearrange the appointment",
time: "9:15",
},
{
id: 3,
avatarIcon: "<DashboardIcon/>",
message: "Good news from sale department",
time: "9:09",
},
];

在我的渲染图中，我写道：

{notifications.map(message => (
<MenuItem key={message.id} className={classes.messageNotification}>
<div className={classes.messageNotificationSide}>
<Avatar className={classes.pinkAvatar}>
<DashboardIcon/>          {/* <----- here */}
</Avatar>
<Typography size="sm" color="secondary">
{message.time}
</Typography>
</div>
...
</MenuItem>
))}

这个问题有解决办法吗喜欢｛message.avatarIcon｝。。。感谢

Answer 1

您必须首先从库中导入图标，然后将其引用到像一样的对象

import {
DashboardIcon
} from "material-ui/icons"

然后像一样引用它

const Icons = [
{
id: 1,
name: "Dashboard",
description:"icon",
icon: DashboardIcon,
}]

现在在地图中使用这样的图标。

{Icons.map(list=>(
<div key={list.id}>
<list.icon className="w-8 h-8" />       
</div>  
))}

Answer 2

我会这样更改你的头像图标值：

const notifications = [
{
id: 0,
avatarIcon: "DASHBOARD",
message: "Hey! How is it going?",
time: "9:32",
},
{
id: 1,
avatarIcon: "MENU",
message: "Check out my new Dashboard",
time: "9:18",
},
{
id: 2,
avatarIcon: "WIFI",
message: "I want rearrange the appointment",
time: "9:15",
},
{
id: 3,
avatarIcon: "DASHBOARD",
message: "Good news from sale department",
time: "9:09",
},
];

然后创建一个方法，使用开关情况来确定要渲染的组件：

...
getAvataricon(icon) {
swicth(icon) {
case 'DASHBOARD':
return (<DashboardIcon/>);
case 'WIFI':
return (<WifiIcon/>);
case 'MENU':
return (<MenuIcon/>);
default:
return (<WhateverIcon/>);
}
}
...
{notifications.map(message => (
<MenuItem key={message.id} className={classes.messageNotification}>
<div className={classes.messageNotificationSide}>
<Avatar className={classes.pinkAvatar}>
{getAvatarIcon(message.avatarIcon)}          {/* <----- here */}
</Avatar>
<Typography size="sm" color="secondary">
{message.time}
</Typography>
</div>
...
</MenuItem>
))}

附言：我是一个Angular开发人员，用React做了一些事情，所以我不确定我的JSX是否完全干净或正确；(

Answer 3

...
const notifications = [
{
id: 0,
avatarIcon: (<DashboardIcon/>),
message: "Hey! How is it going?",
time: "9:32",
},
{
id: 1,
avatarIcon: (<MenuIcon/>),
message: "Check out my new Dashboard",
time: "9:18",
},
{
id: 2,
avatarIcon: (<WifiIcon/>),
message: "I want rearrange the appointment",
time: "9:15",
},
{
id: 3,
avatarIcon: (<DashboardIcon/>),
message: "Good news from sale department",
time: "9:09",
},
];...
<List>
{notifications.map((item, index) => (
<ListItem button key={item}>
<ListItemIcon>{item.avatarIcon}</ListItemIcon>
<ListItemText primary={item.message} />
</ListItem>
))}
</List>

用所需的图标修改列表，并如上所述映射dict中的数据。

Answer 4

所以首先去掉图标上的字符串引号。const通知=[{id:0，avatarIcon:，消息："；嘿进展如何&"；，时间："；9:32"；，}，{id:1，avatarIcon:，消息："；查看我的新Dashboard"；，时间："；9:18"；，}，{id:2，avatarIcon:，消息："；我想重新安排约会"；，时间："；9:15"；，}，{id:3，avatarIcon:，消息："；来自销售部的好消息"；，时间："；9:09"；，}，]；

{notifications.map(message => (
Let Icon = message.avatarIcon;
return(  <MenuItem key={message.id} 
className={classes.messageNotification}>
<div className= 
{classes.messageNotificationSide}>
<Avatar className={classes.pinkAvatar}>
<Icon/>          
</Avatar>
<Typography size="sm" color="secondary">
{message.time}
</Typography>
</div>

</MenuItem>)
))}

因此，我的回答有一点背景，在reactjs中使用Jsx，它允许将组件分配到json对象中并进行传递。我个人使用过这种方法来动态加载index.js文件中各种不同组件的内容。

Answer 5

将此avatarIcon: "DASHBOARD"替换为此avatarIcon: (<DashBoardIcon/>)，因此仅输入实际图标