React编写复杂组件

《使用React编写简单的时钟组件》不同,真实场景中的组件往往比较复杂。

比如Tutorial | React中的示例。该示例需要服务器端,我做了一些简化。见这里:

源代码见:

这里实现的是一个嵌套的组件集合:

1
2
3
- CommentBox
- CommentList
- Comment

页面加载组件的入口在:

1
2
3
4
React.render(
<CommentBox />,
document.getElementById('content')
);

这里使用了JSX方式生成网页元素。

<CommentBox />则会执行创建CommnentBox组件的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var CommentBox=React.createClass({
comments:[
{
title:'不错,超级满意',
content:'样子漂亮,买之前还在担心有什么问题,是我多想了,很实用,很好'
},
{
title:'还不错',
content:'送人的礼物,很满意的购物'
}
],
render:function(){
return (
<div className="commentBox">
<h1>iPad mini 3的评论</h1>
<CommentList data={this.comments}/>
</div>
);
}
});

即执行CommentBoxrender方法。在该方法中,又出现了CommentList组件,于是又将执行:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var CommentList=React.createClass({
render:function(){
var commentNodes=this.props.data.map(
function(comment,index){
return (
<p>
<h3>{comment.title}</h3>
<div>{comment.content}</div>
</p>
);
}
);

return (
<div className="commentList">
{commentNodes}
</div>
);
}
});

Tutorial | React中的评论数据是通过AJAX获取的服务器端JSON数据。这里做了简化,作为CommnentBox的属性:

1
2
3
4
5
6
7
8
9
10
11
var CommentBox=React.createClass({
comments:[
{
title:'不错,超级满意',
content:'样子漂亮,买之前还在担心有什么问题,是我多想了,很实用,很好'
},
{
title:'还不错',
content:'送人的礼物,很满意的购物'
}
],

然后,通过<CommentList data={this.comments}/>将数据传递给CommentList组件。CommentList可以通过this.props(React的机制)对象获取到传递过来的参数。并且React提供了一个map函数来支持迭代执行。

时间原因,就不展开写了,这个示例可继续演进:

1
2
var CommentBox=React.createClass({
comments:[

可通过初始化函数赋值给比如this.state.comments,这样的好处是,React将自动监控该属性的变化,并自动更新界面。

相应的,类似Tutorial | React,可以再增加一个CommentForm组件,用于提交新的评论,push到this.state.comments中,你会看到CommentBox界面也会自动更新。