注意:作为答案的一部分,一个(可选)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;

最佳答案

您的沙箱示例有很多问题,但是我已为您修复了它。将以下内容添加到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,但它不存在

关于javascript - 如何在React JSX中使用map()方法重构<List>内容?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/51872787/

10-13 01:15