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

原创 2015年11月19日 11:12:36
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')
);
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

初试MVVM框架之Vue.js - 列表渲染篇【南大软院大神养成计划】

初试MVVM框架之Vue.js - 列表渲染篇

南大软院大神养成计划 第一天

和很多人不一样,我在此之前是并没有过接触过任何web设计的编程语言的。可能就是因为这样,当今天看见imooc上的代码时,会有点不太适应。是的,我没想到过,居然可以在浏览器里写程序,这确是打破了我之前的...

南大软院大神养成计划——第九天

今天是南大软院大神养成计划实施的第九天,今天学习的主要内容是DOM探索之基础详解篇的剩余两章内容,最后两章内容主要讲解的是“如何判断节点元素类型”和“继承层次和嵌套规则”。 先讲讲“如何判断节点元素...

南大软院大神养成计划--day17

今天学习的是Servlet路径跳转。 1: 使用相对地址(小例子) : 这里面用的是相对路径访问HelloServlet。 这里面的servlet是工程的包名,HelloServlet是类名,这里注意...

南大软院大神养成计划——第十二天

今天是南大软院大神养成计划实施的第十二天,今天学习的内容是DOM事件探秘部分的最后部分——事件类型。事件类型从来大类来分可以分为鼠标事件和键盘事件。 先说说鼠标事件,鼠标事件可以分为click,ov...

南大软院大神养成计划--第四天JavaScript

今天开始学JavaScript (以下是归纳) JavaScript document.write() 输出内容(相当C语言里的printf) var 变量名 ...

南大软院大神养成计划——第三天

今天是11月18号,离南大软院大神养成计划实施已经过去了三天,在这三天里,我仍然在复习基础教程。今天我学习的课程是“如何用CSS进行网页布局”和“网页布局基础”。两个课程都是讲解CSS的基础部分,内容...

南大软院大神养成计划——第十七天

今天是南大软院大神养成计划实施的第十七天,今天学习的还是jQuery基础 一.jQuery事件与运用 页面加载时触发ready()事件 ready()事件类似于onLoad()事件,但前者只要页面的D...

南大软院大神养成计划第三天

今天学习的是html和CSS的基础课程,习题做起来很顺手。对于各种属性、代码的掌握程度在练习中会越来越熟练,不得不说再学习一遍的感觉太好了。当然,对于开发网页来说,之后的路还很长。毕竟网页的开发需要将...
  • jx370
  • jx370
  • 2015-11-18 12:44
  • 218

南大软院大神养成计划——第十天

今天是南大软院大神养成计划实施的第十天。今天主要学习了“DOM事件探秘”。 首先说说第一章“事件流”,那什么是事件流呢?事件流就是描述描述从页面中接受事件的顺序,在浏览器中,IE和Netscape提...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)