Question

我试图映射一个数组，该数组是在父地图中找到的JSON对象的子代。我还在学习JSX并且不确定我是否可以在JSX元素中进行映射，但是我现在的解决方案似乎没有工作，因为对象没有呈现而且还没有#t我的控制台中出现的错误表明存在任何问题。

以下是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.\r\n\r\n* Quisque placerat, arcu placerat tincidunt dapibus, justo sapien accumsan lorem, vitae vulputate orci eros sollicitudin nisi. Vivamus dignissim lectus id tincidunt viverra. \r\n\r\n* **Suspendisse ut tempor magna**, et mattis augue. Quisque pretium dui sollicitudin blandit maximus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, \r\n\r\nper 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是简单的文字。

您可以查看一个有效的示例here。

您可以找到有关props.children here的详细信息。

JSX组件中的子映射未出现

1 个答案: