Javascript 嵌套动态地反应相同的组件_Javascript_Node.js_Reactjs_React Redux

Javascript 嵌套动态地反应相同的组件

javascript node.js reactjs

Javascript 嵌套动态地反应相同的组件,javascript,node.js,reactjs,react-redux,Javascript,Node.js,Reactjs,React Redux,我想动态调用同一组件中的组件 commentdata = [ { "_id": "5dbc479babc1c22683b73cf3", "comment": "wow .. this is awsome", "children": [ { "_id": "5dbc481ec3bb512780ebda22", "comment": "second child", "children": [

我想动态调用同一组件中的组件

        commentdata = [
  {
    "_id": "5dbc479babc1c22683b73cf3",
    "comment": "wow .. this is awsome",
    "children": [
      {
        "_id": "5dbc481ec3bb512780ebda22",
        "comment": "second child",
        "children": [
          {
            "_id": "5dbc481ec3bb512780ebda22",
            "comment": "hi darling",
            "children": [],
            "user": {
              "_id": "5dbb81c8c597533bf4c38e75",
              "username": "arunkavale",
              "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/johnsmithagency/128.jpg"
            },
            "updatedDate": "2019-11-01T14:58:38.188Z",
            "createdDate": "2019-11-01T14:58:38.188Z"
          }
        ],
        "user": {
          "_id": "5dbb81c8c597533bf4c38e75",
          "username": "arunkavale",
          "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/johnsmithagency/128.jpg"
        },
        "updatedDate": "2019-11-01T14:58:38.188Z",
        "createdDate": "2019-11-01T14:58:38.188Z"
      },
      {
        "_id": "5dbc481ec3bb512780ebda22",
        "comment": "yep",
        "children": [],
        "user": {
          "_id": "5dbb81c8c597533bf4c38e75",
          "username": "arunkavale",
          "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/johnsmithagency/128.jpg"
        },
        "updatedDate": "2019-11-01T14:58:38.188Z",
        "createdDate": "2019-11-01T14:58:38.188Z"
      }
    ],
    "user": {
      "_id": "5dbb9683b44bfa2a3dce55bd",
      "username": "mayank",
      "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/alxndrustinov/128.jpg"
    },
    "createdDate": "2019-11-01T14:56:27.580Z",
    "updatedDate": "2019-11-01T14:58:38.188Z",
    "__v": 0
  }
]

以上是我从bcakend获得的评论列表数据

import React from 'react';
import CommentDetail from './commentDetails';

class CommentList extends React.Component {
    constructor(props){
        super(props);
    }
    render(){
        const comments = this.props.comments.map((comment)=>{
            return <CommentDetail comment={comment.comment} key={comment._id}  author = {comment.user} timeAgo={comment.createdDate}></CommentDetail>
        })
        return (
            <div >
               {comments}
            </div >
        )
    }
}

export default CommentList;

从“React”导入React；
从“/commentDetails”导入CommentDetail；
类CommentList扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
const comments=this.props.comments.map（（comment）=>{
返回
})
返回(
{评论}
)
}
}
导出默认注释列表；

从“React”导入React；
从“/CommentAction”导入CommentAction；
const CommentDetail=（道具）=>{
控制台日志（道具）；
返回(
{props.timeAgo}
{props.comment}
)
}
导出默认注释细节；

上面所有的代码都工作得很好，但我希望类似的东西

    import React from 'react';
import CommentDetail from './commentDetails';

class CommentList extends React.Component {
    constructor(props){
        super(props);
    }
    render(){
        const comments = this.props.comments.map((comment)=>{
            if(comment.children.length>0){
                let children=[];
                for (let i = 0; i < comment.children.length; i++) {
                    let commentComp = <CommentDetail comment={comment.comment} key={comment._id}  author = {comment.user} timeAgo={comment.createdDate}>

                            <CommentDetail comment={comment.children[i].comment} key={comment.children[i]._id}  author = {comment.children[i].user} timeAgo={comment.children[i].createdDate}>
                            </CommentDetail>
                    </CommentDetail>

                    children.push(commentComp)
                }
                return children
            }
            return <CommentDetail comment={comment.comment} key={comment._id}  author = {comment.user} timeAgo={comment.createdDate}></CommentDetail>
        })
        return (
            <div >
               {comments}
            </div >
        )
    }
}

export default CommentList;

从“React”导入React；
从“/commentDetails”导入CommentDetail；
类CommentList扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
const comments=this.props.comments.map（（comment）=>{
if（comment.childrence.length>0）{
让孩子们=[]；
for（设i=0；i


在这里，函数应该检查是否有子元素。如果是，那么它应该调用CommentDetail，并将其所有子元素嵌套为CommentDetail组件。我尝试了递归函数，但没有得到…请帮我解决这个问题。提前谢谢。
我不完全确定您想要的输出是什么，但是CommentDetail
不会以任何方式处理子级，因此在CommentDetail
中嵌套CommentDetail
在这种情况下只会显示数组的顶层
首先在渲染外部创建一个renderComments
方法（在大多数情况下，渲染应该是简单的渲染）
下一步将渲染函数包装到
中，并从映射函数返回

在该
中，检查是否存在子项，如果存在子项，则嵌套另一个
，和带有注释的呈现命令
可运行的代码段：

class CommentList扩展了React.Component{
renderComments=（注释）=>(
comments.map（comment=>(

{comment.children.length&&{this.renderComments（comment.children）}}

))
)
render（）{
return{this.renderComments（this.props.commentdata）}
}
}
const CommentDetail=（{comment}）=>{
返回(
{comment.createdDate}
{comment.comment}
)
}
const commentdata=[
{
“_id”：“5DBC479BABC1C12683B73CF3”，
“评论”：“哇……这太可怕了”，
“儿童”：[
{
“_id”：“5dbc481ec3bb512780ebda25”，
“评论”：“第二个孩子”，
“儿童”：[
{
“_id”：“5dbc481ec3bb512780ebda23”，
“评论”：“你好，亲爱的”，
“儿童”：[…]，
“用户”：{
“_id”：“5dbb81c8c597533bf4c38e73”，
“用户名”：“arunkavale”，
“阿凡达”：https://s3.amazonaws.com/uifaces/faces/twitter/johnsmithagency/128.jpg"
},
“更新日期”：“2019-11-01T14:58:38.188Z”，
“createdDate”：“2019-11-01T14:58:38.188Z”
}
],
“用户”：{
“_id”：“5dbb81c8c597533bf4c38e72”，
“用户名”：“arunkavale”，
“阿凡达”：https://s3.amazonaws.com/uifaces/faces/twitter/johnsmithagency/128.jpg"
},
“更新日期”：“2019-11-01T14:58:38.188Z”，
“createdDate”：“2019-11-01T14:58:38.188Z”
},
{
“_id”：“5dbc481ec3bb512780ebda24”，
“评论”：“是的”，
“儿童”：[…]，
“用户”：{
“_id”：“5dbb81c8c597533bf4c38e71”，
“用户名”：“arunkavale”，
“阿凡达”：https://s3.amazonaws.com/uifaces/faces/twitter/johnsmithagency/128.jpg"
},
“更新日期”：“2019-11-01T14:58:38.188Z”，
“createdDate”：“2019-11-01T14:58:38.188Z”
}
],
“用户”：{
“_id”：“5dbb9683b44bfa2a3dce55bd”，
“用户名”：“mayank”，
“阿凡达”：https://s3.amazonaws.com/uifaces/faces/twitter/alxndrustinov/128.jpg"
},
“createdDate”：“2019-11-01T14:56:27.580Z”，
“更新日期”：“2019-11-01T14:58:38.188Z”，
“_v”：0
}
]
ReactDOM.render(
,
document.getElementById（“根”）
);


    import React from 'react';
import CommentDetail from './commentDetails';

class CommentList extends React.Component {
    constructor(props){
        super(props);
    }
    render(){
        const comments = this.props.comments.map((comment)=>{
            if(comment.children.length>0){
                let children=[];
                for (let i = 0; i < comment.children.length; i++) {
                    let commentComp = <CommentDetail comment={comment.comment} key={comment._id}  author = {comment.user} timeAgo={comment.createdDate}>

                            <CommentDetail comment={comment.children[i].comment} key={comment.children[i]._id}  author = {comment.children[i].user} timeAgo={comment.children[i].createdDate}>
                            </CommentDetail>
                    </CommentDetail>

                    children.push(commentComp)
                }
                return children
            }
            return <CommentDetail comment={comment.comment} key={comment._id}  author = {comment.user} timeAgo={comment.createdDate}></CommentDetail>
        })
        return (
            <div >
               {comments}
            </div >
        )
    }
}

export default CommentList;