动态创建一个由 N 个 ListItemTexts 组成的 ListItem
Posted
技术标签:
【中文标题】动态创建一个由 N 个 ListItemTexts 组成的 ListItem【英文标题】：Dynamically create a ListItem comprised of N ListItemTexts 【发布时间】：2021-02-07 17:33:23 【问题描述】：在谷歌搜索时无法找到任何有用的线索后，在这里对初学者做出反应。
给定一个数据列表，其中每个数据描述ListItem 应包含的内容，我如何动态创建并返回 ListItems 列表？每个ListItem 都不同（例如，有些有按钮，有些没有）
const listData = [
"isClickable":true,
"horizontalComponents":[
"type": "image",
"data":
"url": "http://tiny.co/foobar123"
,
"type": "text",
"componentData":
"content": "This is a descriptive text. To view more please click the button on the right."
,
"type": "button",
"componentData":
"buttonString": "View More"
]
];
listData.forEach(itemData =>
var columns: typeof ListItemText[] = [];
itemData.horizontalComponents.forEach(component =>
if (component.type == "text")
columns.push(
<ListItemText primary=`Line item foo` />
)
)
)
【问题讨论】：
如果您可以分享您尝试过的代码，我们可以帮助您将数组映射到 ListItems :) @GuruparanGiritharan 好点！我已经用我一直试图开始工作的代码更新了这个问题。 【参考方案1】：React 组件接受数组作为子元素，因此您可以选择使用 map 返回一个 ListItem 数组
const listData = [
"isClickable": true,
"horizontalComponents": [
"type": "image",
"data":
"url": "http://tiny.co/foobar123"
,
"type": "text",
"componentData":
"content": "This is a descriptive text. To view more please click the button on the right."
,
"type": "button",
"componentData":
"buttonString": "View More"
]
];
function App()
return (
<List>
listData.map((listitem, index) => (
<ListItem key=index>
listitem.horizontalComponents.map((component, index) =>
if (component.type === "text")
return (
<ListItemText key=index>component.componentData.content</ListItemText>
);
else if (component.type === "button")
return <Button key=index variant="contained">component.componentData.buttonString</Button>;
)
</ListItem>
))
</List>
);
ReactDOM.render(<App/>, document.getElementById("root"));<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script>
<script type="text/babel">
const List, ListItem, ListItemText, Button = MaterialUI;
</script>
</body>【讨论】：
谢谢！只是为了将来偶然发现这篇文章的任何人——这个答案已经成为指导方针，在映射horizontalComponents 时有一些小的变化。 （我也在使用打字稿）因为horizontalComponent是三种不同类型的联合，所以我做了一些修改，让它看起来像下面这样："componentData": "textContent" : null, "url": "", "buttonString": "View More" 可能有更好的解决方案，但字符用完了以上是关于动态创建一个由 N 个 ListItemTexts 组成的 ListItem的主要内容，如果未能解决你的问题，请参考以下文章