Javascript - 通过 array.map() 返回两个输出

Question

我在反应组件中有以下回报：

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 fragment，使用它们的完整语法<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 中呈现，并允许您将任何元素放入其中。