关闭

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

229人阅读 评论(0) 收藏 举报
分类:
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')
);
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:2230次
    • 积分:42
    • 等级:
    • 排名:千里之外
    • 原创:2篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档