Reactjs 在React中呈现嵌套注释

我正在尝试在React中实现嵌套注释。基本上我现在得到的代码是这样的

代码如下所示：

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)

var nested=[…]
函数注释（{Comment}）{
const nestedComments=comment.map（comment=>{
返回；
});
console.log（nestedComments）
返回(
{comment.body}
{nestedComments}
);
}
ReactDOM.render(
,
document.getElementById（'容器'）
);

我得到如下错误：

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)

未捕获类型错误：comment.map不是函数
在注释处（eval at transform.run（VM70 browser.js:5811），：947:31）
在vmdom.js:4767
在measureLifeCyclePerf（vmdom.js:4537）
在ReactCompositeComponentWrapper.\u constructComponentWithoutOwner（VM134 react dom.js:4766）
在ReactCompositeComponentWrapper.\u constructComponent（VM134 react dom.js:4741）
位于ReactCompositeComponentWrapper.mountComponent（VM134 react dom.js:4649）
在Object.mountComponent（vmdom.js:11551）
位于ReactDOMComponent.mountChildren（VM134 react dom.js:10442）
在ReactDOMComponent._createInitialChildren（VM134 react dom.js:6176）
位于ReactDOMComponent.mountComponent（VM134 react dom.js:5995）

---

不知道我做错了什么

我相信你的结构就像

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

在这种情况下，您应该更改函数以第二次传递注释数组，并检查嵌套注释是否存在

试一试

var nested=[…]
函数注释（{Comment}）{
const nestedComments=null；
如果（注释类型=='array'）
nestedComments=comment.map（comment=>{
返回；
});
console.log（nestedComments）
返回(
{comment.body}
{nestedComments}
);
}
ReactDOM.render(
,
document.getElementById（'容器'）
);

在他的JSFIDLE中使用您的代码似乎不起作用。。请查看以下答案：