如何映射列表并在其中传递@ material-ui / 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

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>
            ))}

P.S。我是Angular开发人员，使用React做过一些事情，所以我不确定我的JSX是否完全干净或正确;）