初试MVVM框架之React入门【南大软院大神养成计划】

var data = [
{author: "Pete Hunt", text: "This is one comment"},
{author: "Jordan Walke", text: "This is *another* comment"}
];
//读取父组件的数据
//在这儿this.props.author读取了传进来的author数据
//而“This this one comment”等数据则被this.props.children读取了
//另外使用的时候，要渲染的一定要放在ReactDOM.render之前。
//上下尊卑有序。
var Comment = React.createClass({
render: function () {
return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
{this.props.children}
<hr/>
</div>
)
}
});
//CommentBox
//data={this.props.data}，这句话的意思是
var CommentBox = React.createClass({
render: function () {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.props.data}/>
<CommentForm/>
</div>
);
}
});
//CommentList
//这里map的意思是一个遍历函数
//把json数据传进去，并且命名为comment
//然后return，Comment author = {comment.author},{comment.text}
//然后commentNodes是一个数组，React会对其自动解包
//
var CommentList = React.createClass({
render:function() {
var commentNodes = this.props.data.map(function (comment) {
return (
<Comment author = {comment.author}>
{comment.text}
</Comment>
)
})
return (
<div className="commentList">
{commentNodes}
</div>
)
}
});
//CommentForm
var CommentForm = React.createClass({
render: function () {
return (
<div className="commentForm">
Hello I'm a commentForm.
</div>
)
}
});
//React的render
ReactDOM.render(
<CommentBox data={data}/>,
document.getElementById('content')
);