Question

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

我想重构JSX中的列表。具体来说，我started with this CodeSandbox。现在我要refactor it into this CodeSandbox。但我一直收到以下错误。

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

或者，换句话说。

对此（抛出错误） https://codesandbox.io/s/p3j56vxx8m

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;

从此| https://codesandbox.io/s/k3zokkyxx3

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;

Answer 1

您的沙箱示例有很多错误，但是我已经为您修复了它。将以下内容添加到demo.js。

您可以使用React.createElement(icon)来实现此行为。

import React, { Component } 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>
    {
      React.createElement(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 Dashboard;

一些问题：

constructListItem之后的分号（在地图函数中）不需要存在。
Component未定义
您正在导出SimpleList，但它不存在

Answer 2

除Dan's answer以外，这是我的固定代码版本：

import React, {Component} 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 SimpleList extends Component {

  state = {
    list: list
  }

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

export default SimpleList;

如何在React JSX中使用map（）方法重构<list>内容？

2 个答案: