Javascript-通过array返回两个输出。map（）

Question

我在react组件中有以下返回：

render() {
     return(
            <div>
                <div className = "category-name">
                    {categories.map(category =>
                        <p>{category.name}</p>
                    )}
                </div>
                <div className = "category-name">
                    {categories.map(category =>
                        <Playlist categoryid={category.id}/>
                    )}
                </div>
            </div>
        );
}

这将显示类别的名称，然后遍历名称数组，以从播放列表组件获取描述。有人可以告诉我如何返回每个名字下的播放列表吗？我尝试了以下操作，但它行不通：

render() {
  return(
            <div>
                <div className = "category-name">
                    {categories.map(category =>{
                        return (<p>{category.name}</p>,
                            <Playlist categoryid={category.id}/>)
                        }     
                    )}
                </div>
            </div>
        );
}

Answer 1

您可以使用react fragments，使用其完整语法<React.Fragment>可以在其中放置键属性：

<div className = "category-name">
    {categories.map(category => {
        return 
            <React.Fragment key={category.id}>
                <p>{category.name}</p>,
                <Playlist categoryid={category.id}/>
            </React.Fragment>
        }   
    )}
</div>

<React.Fragment>元素将不会在DOM中呈现，并且允许您在其中放置任何元素。

Answer 2

您需要在地图函数中的某些html标记或React.Fragment中包装元素：

render() {
  return(
            <div>
                <div className = "category-name">
                    {categories.map(category => (
                          <div key={category.id}>
                            <p>{category.name}</p>
                            <Playlist categoryid={category.id}/>
                         </div>
                        )
                    )}
                </div>
            </div>
        );
}

而且，请不要忘记在循环中使用key