如何使用 React JSX 中的 map() 方法重构 <List> 内容？

注意：作为答案一部分的（可选）CodeSandbox 演示将最有帮助

我想在 JSX 中重构一个列表。具体来说，我从这个 CodeSandbox 开始。现在我想将它重构到这个 CodeSandbox 中。但我不断收到以下错误。

/demo.js: Unexpected token (17:7)
  15 |   <ListItem key={`${label}`}>
  16 |     <ListItemIcon>
* 17 |       <`${icon}` />
     |       ^
  18 |     </ListItemIcon>
  19 |     <ListItemText primary={`${label}`} />
  20 |   </ListItem>

或者，换句话说。

import React from "react";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import InboxIcon from "@material-ui/icons/Inbox";

const list = [
  { label: 'Inbox1', icon: InboxIcon },
  { label: 'Inbox2', icon: InboxIcon },
  { label: 'Inbox3', icon: InboxIcon },
];

const constructListItem = (label, icon) => (
  <ListItem key={`${label}`}>
    <ListItemIcon>
      <`${icon}` />
    </ListItemIcon>
    <ListItemText primary={`${label}`} />
  </ListItem>
);

class Dashboard extends Component {

  state = {
    list: list
  }

  render() {
    return (
      <List component="nav">
        {this.state.list.map((item) => (
          constructListItem(item.label, item.icon);
        ))}
      </List>
    );
  }
}

export default SimpleList;

import React from "react";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import InboxIcon from "@material-ui/icons/Inbox";

function SimpleList(props) {
  return (
    <List component="nav">
      <ListItem>
        <ListItemIcon>
          <InboxIcon />
        </ListItemIcon>
        <ListItemText primary="Inbox1" />
      </ListItem>
      <ListItem>
        <ListItemIcon>
          <InboxIcon />
        </ListItemIcon>
        <ListItemText primary="Inbox1" />
      </ListItem>
      <ListItem>
        <ListItemIcon>
          <InboxIcon />
        </ListItemIcon>
        <ListItemText primary="Inbox1" />
      </ListItem>
    </List>
  );
}

export default SimpleList;