Question

假设我有一个JSON对象，如：

posts = [
    {
        id: '1',
        title: 'Title of Post',
        body: 'article content here',
        comment: [
            {
                comment_id: 1,
                author: 'Andy',
                body: 'Comment Body'
            },
            {
                comment_id: 2,
                author: 'Joe',
                body: 'Comment from Joe'
            }
        ]
    }
]

现在我的问题是，我需要在反应表组件中显示评论列表及其帖子。

-------------------------------------------------------------------------------
| Comment Id  |   Author         |    body              |   Post              |
-------------------------------------------------------------------------------
| 1           |   Andy           |    Comment Body      |   Title of Post     |  
| 2           |   Joe            |    Comment from Joe  |   Title of Post     |  
-------------------------------------------------------------------------------

最好的方法是什么？我是否需要创建一个新的对象来“展平”对象？还是有更好的方法？

提前致谢

Answer 1

您可以通过在渲染函数中映射数据来列出所有帖子：

render(){
    let posts = posts.map(post=>{
        let comments = post.comment.map(comment=>{
            return (
                <tr>
                    <td>
                        {comment.comment_id}
                    </td>
                    <td>
                        {comment.author}
                    </td>
                    <td>
                        {comment.body}
                    </td>
                    <td>
                        {post.title}
                    </td>
                </tr>
            )
        });
        return (
            <table>
                <tr>
                    <td>Comment Id</td>
                    <td>Author</td>
                    <td>Body</td>
                    <td>Post</td>
                </tr>
                {comments}
            </table>
        );
    });
    return (
        <div>
            {posts}
        </div>
    )
}

Answer 2

我会创建一个通用的Table组件，它会接受作为子项的列和将被解释为表行的数据，在您的情况下是comments数组。它的用法就是这样（一般的想法）：

<Table data={ posts }>
   <Column name="Comment Id" property="comment_id"></Column>
   <Column name="Author" property="author"></Column>
   <Column name="Body" property="body"></Column>
   <Column name="Post" customProperty={ () => posts.title }></Column>
</Table>

每列将根据给出的property密钥获取其数据，并在其父级的data prop中查找。您还可以在customProperty组件中提供Column，例如在您的情况下，所需数据需要传递到Table组件的范围之外的值。（这样你也可以为各种更复杂的类型传递其他React组件，比如工具提示或图标等）

反应嵌套的json

2 个答案: