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