javascript - 嵌套动态地 react 相同的组件

Question

我想动态调用同一组件内的组件。

        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;

.

import React from 'react';
import CommentAction from './commentAction';

const CommentDetail = (props) =>{
    console.log(props);

    return (
        <div className="comment">
            <a href="/" className="avatar">
            <img alt="avatar" src={props.author.avatar} />
            </a>
            <div className="content">
                <a href="/" className="author">
                    {props.author.username}
                </a>
                <div className="metadata">
                    <span className="date">
                    {props.timeAgo}
                    </span>
                </div>
                <div className="text">{props.comment}</div>
                <CommentAction user={props.author}></CommentAction>
            </div>
        </div>
    )
}

export default CommentDetail;

以上所有代码工作正常，但我想要类似的东西

    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;

这里函数应该检查是否有任何子级，如果有，那么它应该调用 CommentDetail 并嵌套所有子级，如 CommentDetail 组件中一样。我尝试了递归函数，但我没有得到......请帮助我。提前谢谢您。

Answer 1

我不完全确定您想要的输出是什么，但是 CommentDetail不以任何方式处理子项，因此嵌套 commentDetail在commentDetail内在这种情况下，只会显示数组的顶层。

首先创建一个renderComments渲染之外的方法(在大多数情况下渲染应该只是渲染)

接下来将该渲染函数包装在 <ul> 中并返回<li>来自 map 函数

其中<li>检查是否有 child ，如果有，则再嵌套<ul>和renderComments与 comment.children递归地

可运行代码段:

class CommentList extends React.Component {
  renderComments = (comments) => (
      comments.map(comment=>(
        <li key={comment._id}>
          <CommentDetail comment={comment} />
          {comment.children.length && <ul>{this.renderComments(comment.children)}</ul>}
        </li>
      ))
  )

  render(){
      return <ul>{this.renderComments(this.props.commentdata)}</ul>
  }
}






















const CommentDetail = ({comment}) =>{

  return (
    <div className="comment">
      <a href="/" className="avatar">
        <img alt="avatar" src={comment.user.avatar} />
      </a>
      <div className="content">
        <a href="/" className="author">
          {comment.user.username}
        </a>
        <div className="metadata">
          <span className="date">
            {comment.createdDate}
          </span>
        </div>
        <div className="text">
          {comment.comment}
        </div>
      </div>
    </div>
  )
}






const commentdata = [
  {
    "_id": "5dbc479babc1c22683b73cf3",
    "comment": "wow .. this is awsome",
    "children": [
      {
        "_id": "5dbc481ec3bb512780ebda25",
        "comment": "second child",
        "children": [
          {
            "_id": "5dbc481ec3bb512780ebda23",
            "comment": "hi darling",
            "children": [],
            "user": {
              "_id": "5dbb81c8c597533bf4c38e73",
              "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": "5dbb81c8c597533bf4c38e72",
          "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": "5dbc481ec3bb512780ebda24",
        "comment": "yep",
        "children": [],
        "user": {
          "_id": "5dbb81c8c597533bf4c38e71",
          "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
  }
]


ReactDOM.render(
  <CommentList commentdata={commentdata}/>,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

<div id="root"></div>