gpt4 book ai didi

javascript - 如何使用 React JSX 中的 map() 方法重构 内容?

转载 作者:行者123 更新时间:2023-11-28 14:29:53 25 4
gpt4 key购买 nike

注意:(可选)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 之后包含的分号(在 map 函数内)不需要在那里。
  • 组件未定义
  • 您正在导出 SimpleList,但它不存在

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

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com