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

Posted 2023-02-22

【中文标题】映射元素中的 JSX 映射元素，相邻的 JSX 元素必须包含在封闭标记中

【英文标题】：JSX mapping element within mapping element, Adjacent JSX elements must be wrapping in enclosing tags

【发布时间】：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>
    );

【参考方案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>
     ...