嵌套动态地反应相同的成分

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组件中那样调用嵌套了所有子级的CommentDetails。我尝试过递归函数，但没有得到。。。请帮我做这个。并提前感谢您。

Answer 1

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

首先在渲染之外创建一个renderComments方法(在大多数情况下，渲染应该只是简单地进行渲染(

接下来在<ul>中包装该渲染函数，并从映射函数返回<li>

在该<li>中，检查是否有子级，如果有，则递归地用comment.children嵌套另一个<ul>和renderComments

可运行的代码段：

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>