React.js中的嵌套注释 [英] Nested comments in Reactjs
本文介绍了React.js中的嵌套注释的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有以下json:
{
"comments":[
{
"id":1,
"comment_text":"asdasdadasdsadsadadsa",
"author":"adsfasdasdsad",
"post_id":1,
"ancestry":null,
"archived":false,
"created_at":"2014-10-16T23:16:44.173Z",
"updated_at":"2014-10-16T23:16:44.173Z",
"is_moderated":false,
"avatar_url":null,
"slug":null,
"blog_id":2,
"children":[
]
},
{
"id":2,
"comment_text":"idlsfghlskdhvbsldfhjdslifds\nzf\ndsf\nds\nf\ns\nf\ns\nfds\nfsdjghfsdligjhsepfiguhefdliguhefldiughfeliughnfesg\nf\nsg\ns\ng\ns\ndf\nsd\nf\nsdgsofughlefidughls;uhgsuhg.vskjfhglsiuhg.sfv",
"author":"asdsdasdad",
"post_id":1,
"ancestry":null,
"archived":false,
"created_at":"2014-10-16T23:17:02.270Z",
"updated_at":"2014-10-16T23:17:02.270Z",
"is_moderated":false,
"avatar_url":null,
"slug":null,
"blog_id":2,
"children":[
{
"id":3,
"comment_text":"fdsfdsfdsfsdfsfsdf",
"author":"sdfdsfdsfdsfds",
"post_id":1,
"ancestry":"2",
"archived":false,
"created_at":"2014-11-28T17:39:47.059Z",
"updated_at":"2014-11-28T17:39:47.059Z",
"is_moderated":false,
"avatar_url":null,
"slug":null,
"blog_id":2,
"children":[
{
"id":4,
"comment_text":"fdsfdsfdsdsfdsfds",
"author":"sdfsdfdsfsdfdsfds",
"post_id":1,
"ancestry":"2/3",
"archived":false,
"created_at":"2014-11-28T17:39:53.049Z",
"updated_at":"2014-11-28T17:39:53.049Z",
"is_moderated":false,
"avatar_url":null,
"slug":null,
"blog_id":2,
"children":[
{
"id":5,
"comment_text":"sdfdsfdsfdsfdssdfsdfdsfdsfdsfds",
"author":"sdfsdfdsfdsfdsf",
"post_id":1,
"ancestry":"2/3/4",
"archived":false,
"created_at":"2014-11-28T17:40:02.032Z",
"updated_at":"2014-11-28T17:40:02.032Z",
"is_moderated":false,
"avatar_url":null,
"slug":null,
"blog_id":2,
"children":[
]
}
]
}
]
}
]
}
]
}
如您所见，某些注释包含注释的children: [].我需要基于此键在Reactjs中创建嵌套注释.
我能够以一种非常凌乱的jquery方式来做到这一点，但是使用React，我想摆脱jquery并创建一个嵌套注释的纯react基础.
有人知道这样做的任何例子，想法或方式吗?到目前为止，我有:
var Comments = React.createClass({
render: function() {
<div>
<ul>
<li>sample</li>
</ul>
{this.props.children}
</div>
}
});
我的想法是遍历所有评论，并说他们是否有孩子，然后再创建一个类似的评论
for (var i = 0; i < comments.length; i++) {
<Comments>
if (children) {
<Comments></Comments>
}
</Comments>
}
但这不会真正起作用，我可以将其封装在一个函数中并说:
comments: function(comments){
for (var i = 0; i < comments.length; i++) {
<Comments>
if (children) {
this.comments(comments);
}
</Comments>
}
}
我在正确的轨道附近吗?
解决方案
您需要两个组件:评论和评论.
Comment = React.createClass({
render: function(){
var comment = this.props.comment;
return <div>
<p>{comment.author} says {comment.comment_text}</p>
<Comments comments={comment.children} />
</div>
}
});
Comments = React.createClass({
render: function(){
return <div>
{this.props.comments.map(function(comment){
return <Comment key={comment.id} comment={comment} />
})
</div>
}
});
Comment呈现注释，而后者又可以呈现Comment节点等.这将以递归方式构建注释结构.
I have the following json:
{
"comments":[
{
"id":1,
"comment_text":"asdasdadasdsadsadadsa",
"author":"adsfasdasdsad",
"post_id":1,
"ancestry":null,
"archived":false,
"created_at":"2014-10-16T23:16:44.173Z",
"updated_at":"2014-10-16T23:16:44.173Z",
"is_moderated":false,
"avatar_url":null,
"slug":null,
"blog_id":2,
"children":[
]
},
{
"id":2,
"comment_text":"idlsfghlskdhvbsldfhjdslifds\nzf\ndsf\nds\nf\ns\nf\ns\nfds\nfsdjghfsdligjhsepfiguhefdliguhefldiughfeliughnfesg\nf\nsg\ns\ng\ns\ndf\nsd\nf\nsdgsofughlefidughls;uhgsuhg.vskjfhglsiuhg.sfv",
"author":"asdsdasdad",
"post_id":1,
"ancestry":null,
"archived":false,
"created_at":"2014-10-16T23:17:02.270Z",
"updated_at":"2014-10-16T23:17:02.270Z",
"is_moderated":false,
"avatar_url":null,
"slug":null,
"blog_id":2,
"children":[
{
"id":3,
"comment_text":"fdsfdsfdsfsdfsfsdf",
"author":"sdfdsfdsfdsfds",
"post_id":1,
"ancestry":"2",
"archived":false,
"created_at":"2014-11-28T17:39:47.059Z",
"updated_at":"2014-11-28T17:39:47.059Z",
"is_moderated":false,
"avatar_url":null,
"slug":null,
"blog_id":2,
"children":[
{
"id":4,
"comment_text":"fdsfdsfdsdsfdsfds",
"author":"sdfsdfdsfsdfdsfds",
"post_id":1,
"ancestry":"2/3",
"archived":false,
"created_at":"2014-11-28T17:39:53.049Z",
"updated_at":"2014-11-28T17:39:53.049Z",
"is_moderated":false,
"avatar_url":null,
"slug":null,
"blog_id":2,
"children":[
{
"id":5,
"comment_text":"sdfdsfdsfdsfdssdfsdfdsfdsfdsfds",
"author":"sdfsdfdsfdsfdsf",
"post_id":1,
"ancestry":"2/3/4",
"archived":false,
"created_at":"2014-11-28T17:40:02.032Z",
"updated_at":"2014-11-28T17:40:02.032Z",
"is_moderated":false,
"avatar_url":null,
"slug":null,
"blog_id":2,
"children":[
]
}
]
}
]
}
]
}
]
}
As you can see, some of the comments contain a children: [] of comments. I need to create nested comments in Reactjs based on this key.
I was able to do this in a very messy jquery way, but with React I want to move away from jquery and create a pure react base of nested comments.
Any one know of any examples, ideas or way of doing this? What I have so far is:
var Comments = React.createClass({
render: function() {
<div>
<ul>
<li>sample</li>
</ul>
{this.props.children}
</div>
}
});
My idea was to loop over the comments and say if they had children just create another comment something like
for (var i = 0; i < comments.length; i++) {
<Comments>
if (children) {
<Comments></Comments>
}
</Comments>
}
But this wont really work, I could encapsulate this in a function and say:
comments: function(comments){
for (var i = 0; i < comments.length; i++) {
<Comments>
if (children) {
this.comments(comments);
}
</Comments>
}
}
Am I any where near on the right track?
解决方案
You need two components: Comments and Comment.
Comment = React.createClass({
render: function(){
var comment = this.props.comment;
return <div>
<p>{comment.author} says {comment.comment_text}</p>
<Comments comments={comment.children} />
</div>
}
});
Comments = React.createClass({
render: function(){
return <div>
{this.props.comments.map(function(comment){
return <Comment key={comment.id} comment={comment} />
})
</div>
}
});
The Comment renders Comments, which in turn can render Comment nodes, etc. This recursively builds the comment structure.
这篇关于React.js中的嵌套注释的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
