未显示JSX组件中的映射子项

Question

我正在尝试映射一个数组，该数组是在父映射中找到的JSON对象的子对象。我仍在学习JSX，不确定我是否可以在JSX元素中进行映射，但我当前的解决方案似乎不起作用，因为对象没有呈现，我的控制台中也没有出现任何错误，表明有任何问题。

这是JSON对象：

[
{
"blogIdHash": "Zb2q97rX5n",
"title": "This is a test",
"discovery": "* Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris bibendum porta felis, vel varius ligula venenatis eget.rnrn* Quisque placerat, arcu placerat tincidunt dapibus, justo sapien accumsan lorem, vitae vulputate orci eros sollicitudin nisi. Vivamus dignissim lectus id tincidunt viverra. rnrn* **Suspendisse ut tempor magna**, et mattis augue. Quisque pretium dui sollicitudin blandit maximus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, rnrnper inceptos himenaeos. Quisque mattis lacinia felis eget sagittis. Quisque sed eros scelerisque",
"created_at": "2017-09-01T11:46:31.914Z",
"updated_at": "2017-09-01T12:14:59.375Z",
"blog_comments": [
{
"blogIdHash": "Zb2q97rX5n",
"blogCommentId": 9,
"comment": "Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur porta, eros vitae laoreet pharetra, neque dolor facilisis augue, elementum maximus sapien tortor nec sem. Sed eget est sed felis tincidunt congue. Sed blandit neque vitae tellus interdum, non gravida tortor venenatis.",
"userId": 237,
"created_at": "2017-09-01T11:54:49.089Z",
"updated_at": "2017-09-01T11:54:49.089Z",
},
{
"blogIdHash": "Zb2q97rX5n",
"blogCommentId": 10,
"comment": "Sed laoreet felis ac interdum faucibus. Pellentesque non purus commodo, faucibus magna ac, pharetra urna. Sed sapien eros, efficitur in dui venenatis, euismod mattis nisl. Cras a posuere turpis. Morbi suscipit mollis risus, convallis auctor urna. Nam tristique, ex quis sodales tempor, massa urna maximus odio,",
"userId": 240,
"created_at": "2017-09-01T11:59:12.573Z",
"updated_at": "2017-09-01T11:59:12.573Z",
}
]
}
]

以下是组件设置(JSON blob是通过父组件设置的。BlogFeed使用BlogCard中设置的第一个映射对象进行渲染)：

const BlogFeed = props => {
return (
<div>
{ 
props.blogs.map((blog, index) => {
return (
<BlogCard {...blog} key={blog.blogIdHash}>
return(
{ blog.blog_comments.map((comment, i) => <Comments {...comment} key={i} />)}
)
</BlogCard>
);
})
}
</div>
)
}
const BlogCard = props => {
return (
<div key={props.blogIdHash}>
<h4>{props.title}</h4>
<p>{props.discovery}</p>
</div>
)
}
const Comments = props => {
return (
<div key={props.blogCommentId}>
<h4>{props.comment}</h4>
</div>
)
}

Answer 1

您需要在BlogCard组件中指定在何处渲染其子级。

像这样：

const BlogCard = props => {
return (
<div>
<h4>{props.title}</h4>
<p>{props.discovery}</p>
{props.children} // its children
</div>
)
}

此外，您不需要在BlogCard组件中返回，map返回一个数组，该返回将与注释一起在props.children中传递，并以简单文本的形式显示在HTML中。

你可以在这里查看一个工作示例。

您可以在此处找到有关props.children的更多详细信息。