初试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 - 列表渲染篇

【南大软院大神养成计划:第十天】久违了,JavaScript——入门篇(二)

今天把《JS入门篇》课程完成了,今早取快递路上思考人生时,粗略算了算,前端工程师课程总共700+节,21天学完需要每天完成37节,这样算当然不是很科学,但是也一定程度上体现了学习任务的并不轻松。  ...

南大软院大神养成计划-Web前端入门学习归纳第二天-认识前端开发工具Dreamweaver(2)

接上篇 五、智能提示功能 DW对各种不同的语言文件的各种标签、CSS文件的各种属性、编写代码时的各种操作、JAVAscript语言中的函数关键字等都有提示,对语法错误也会立即在行号上有提示,这些对...

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

第三天 终于结束了 慕课HTML+CSS部分的HTML基本语句~~~ 今天 看完HTML以后 我需要冷静一下 回顾一下 嗯,就这样。 表单中的各种按钮~~~ 1st. 提交按钮 ...
  • YaKIcoo
  • YaKIcoo
  • 2015年11月18日 23:48
  • 176

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

Jsp生命周期 :其中jspService()方法处理客户端请求。Servlet常驻内存, Servlet类的对象称为一个servlet,当客户请求一个JSP页面时,Tomcat服务器自动生成Jav...
  • TimeSea
  • TimeSea
  • 2015年11月23日 22:15
  • 279

南大软院大神养成计划--HTML和CSS基础课程

初步了解HTML    准确来说今天是自主学习的第二天,选择了基础的课程html。在今天的学习过程中也感到了计算机语言的优美,个人感觉它还是非常有趣的。简要记录一些今天个人所学和所得。 认识Htm...

南大软院大神养成计划--网站

(1)在制作之前进行首页布局分析,弄清盒子之间的关系,分为顶部,LOGO区,导航区,大图广告区,之后一般分为3个区按功能规划,底部版权区。(2)页面头部制作,分析头部结构,分析盒子结构,根据功能设计样...
  • hiiiji
  • hiiiji
  • 2015年12月03日 21:20
  • 172

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

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

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

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

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

今天开始学JavaScript (以下是归纳) JavaScript document.write() 输出内容(相当C语言里的printf) var 变量名 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:初试MVVM框架之React入门【南大软院大神养成计划】
举报原因:
原因补充:

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