似乎无法找到尝试将JSX元素都映射到JSX元素中的方法。我收到返回错误“相邻的JSX元素必须包装在一个封闭的标记中。您是否想要JSX片段<> ... </>？
我知道return函数需要整体返回一个元素，我相信我正在使用最顶层的div。外部映射正在映射字符串数组，内部映射正在映射已导入的Web Pack。我正在从redux状态中拉出字符串的外部映射，并且我已经验证了它的工作原理，并且Web Pack也可以正确映射，只是无法将它们映射在一起。在我的脑海中，我只是认为这基本上是一个外循环，然后是一个内循环。我会征求任何意见。
我想这个问题有一个简单的答案，只是无法弄清楚。
这是我的功能组件：
function UserLesson() {
const classes = useStyles();
const selectLessons = useSelector(state => state.redu.userLessons)
return (
<div className={classes.root}>
{selectLessons.map((title) => (
<h2>{title}</h2>
<GridList className={classes.gridList} cols={2.5}>
{searchResources.result.map((resource) => (
<GridListTile key={resource.media}>
<img src={resource.media} alt={resource.title} />
<GridListTileBar
title={resource.title}
classes={{
root: classes.titleBar,
title: classes.title,
}}
actionIcon={
<IconButton aria-label={`star ${resource.title}`}>
<StarBorderIcon className={classes.title} />
</IconButton>
}
/>
</GridListTile>
))}
</GridList>
))}
</div>
);
}
要返回多个元素，您需要将它们包装在父元素中。以下是几种方法：
通过添加一个额外的父元素：
return (
<div>
<Child/>
<Child/>
</div>
)
不添加任何额外的父元素：
return (
<React.Fragment>
<Child/>
<Child/>
</React.Fragment>
)
或使用Fragment的简写：
return (
<>
<Child/>
<Child/>
</>
)
因此，您可以这样做来解决您的问题：
{selectLessons.map((title) => (
<React.Fragment key={some key here}>
<h2>{title}</h2>
<GridList className={clas....
....
</React.Fragment>
...
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句