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') );
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。