映射元素中的 JSX 映射元素，相邻的 JSX 元素必须包含在封闭标记中答案

【问题标题】：JSX mapping element within mapping element, Adjacent JSX elements must be wrapping in enclosing tags映射元素中的 JSX 映射元素，相邻的 JSX 元素必须包含在封闭标记中
【发布时间】：2021-05-20 23:07:56
【问题描述】：

似乎无法找到解决方法来尝试在都被映射的 JSX 元素中包含 JSX 元素。我收到返回错误“必须将相邻的 JSX 元素包装在封闭标记中。你想要一个 JSX 片段 ...> 吗？'

我知道返回函数需要将一个元素作为一个整体返回，我相信我正在使用最顶层的 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>
    );
}

【问题讨论】：

标签： javascript arrays reactjs redux jsx

【解决方案1】：

要返回多个元素，您需要将它们包装在父元素中。以下是几种方法：

通过添加额外的父元素：

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>
     ...

【讨论】：