在React中渲染嵌套注释

Question

我试图在React中实现嵌套注释。基本上我得到了这样的代码here。

的代码如下所示：

var nested = [...] 

function Comment({ comment }) { 
    const nestedComments = comment.map(comment => { 
    return <Comment comment={comment} />; 
    }); 

    console.log(nestedComments) 

    return (
    <div key={comment.id}> 
     <span>{comment.body}</span> 
     {nestedComments} 
    </div> 
); 
} 

ReactDOM.render(
    <Comment comment={nested}/>, 
    document.getElementById('container') 
); 

我得到一个错误这样的：

Uncaught TypeError: comment.map is not a function 
at Comment (eval at transform.run (VM70 browser.js:5811), <anonymous>:947:31) 
at VM134 react-dom.js:4767 
at measureLifeCyclePerf (VM134 react-dom.js:4537) 
at ReactCompositeComponentWrapper._constructComponentWithoutOwner (VM134 react-dom.js:4766) 
at ReactCompositeComponentWrapper._constructComponent (VM134 react-dom.js:4741) 
at ReactCompositeComponentWrapper.mountComponent (VM134 react-dom.js:4649) 
at Object.mountComponent (VM134 react-dom.js:11551) 
at ReactDOMComponent.mountChildren (VM134 react-dom.js:10442) 
at ReactDOMComponent._createInitialChildren (VM134 react-dom.js:6176) 
at ReactDOMComponent.mountComponent (VM134 react-dom.js:5995) 

不知道我在做什么错在这里。

Answer 1

我相信你的结构是这样

var nested= [ 
    {comment_id: '..', 
    comment_body: '..', 
    comments: [{...}] 
    }, 
    ... 
] 

在这种情况下，你应该改变你的函数传递的评论阵列的第二次检查嵌套的注释是否存在或不

尝试

var nested = [...] 

function Comment({ comment }) { 

    const nestedComments = null; 
    if(typeof comment === 'array') 
    nestedComments= comment.map(comment => { 
    return <Comment comment={comment.comments} />; 
    }); 

    console.log(nestedComments) 

    return (
    <div key={comment.id}> 
     <span>{comment.body}</span> 
     {nestedComments} 
    </div> 
); 
} 

ReactDOM.render(
    <Comment comment={nested}/>, 
    document.getElementById('container') 
);