时间戳

首页 > 解决方案 > 映射元素中的 JSX 映射元素，相邻的 JSX 元素必须包含在封闭标记中

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

问题描述

似乎无法找到解决方法来尝试在都被映射的 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>
    );
}

标签： javascriptarraysreactjsreduxjsx

解决方案

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

通过添加额外的父元素：

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

推荐阅读