这个看得有点懵，

可能要结合其它实例看。

html

<!DOCTYPE html>
<html>
<head>
  <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css"></script>
  <script src="http://cdn.bootcss.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <script src="http://cdn.bootcss.com/react/0.14.8/react-with-addons.js"></script>
  <script src="http://cdn.bootcss.com/react/0.14.8/react-dom.min.js"></script>

<meta charset="utf-8">
<title>React JS Example</title>
</head>

<body>
  React.js Example<br/>
<div id="container">
</div>
</body>
</html>

js

var data = [{ "when": "2 minutes ago",
    "who": "Jill Dupre",
    "description": "Created new account"
  },
  {
    "when": "1 hour ago",
    "who": "Lose White",
    "description": "Added fist chapter"
}];
var headings = ['When', 'Who', 'Description'];

var Heading = React.createClass({
  render: function() {
    return <th>{this.props.heading}</th>;
  }
});

var Headings = React.createClass({
  render: function() {
    var headings = this.props.headings.map(function(name) {
      return <Heading heading = {name}/>;
    });
    return <thead><tr>{headings}</tr></thead>;
  }
});

var Row = React.createClass({
  render: function() {
    return <tr>
      <td>{this.props.changeSet.when}</td>
      <td>{this.props.changeSet.who}</td>
      <td>{this.props.changeSet.description}</td>
    </tr>;
  }
});

var Rows = React.createClass({
  render: function() {
    var rows = this.props.changeSets.map(function(changeSet) {
    return(<Row changeSet = {changeSet}/>);
    });
    return <tbody>{rows}</tbody>;
  }
});

var App = React.createClass({
  render: function() {
  return <table className = 'table'>
    <Headings headings = {this.props.headings} />
    <Rows changeSets = {this.props.changeSets} />
    </table>;
  }
});

ReactDOM.render(<App headings = {headings}
        changeSets = {data} />,
        document.getElementById('container'));

react.js 多个组件集成示例的更多相关文章

  1. RSuite 一个基于 React.js 的 Web 组件库

    RSuite http://rsuite.github.io RSuite 是一个基于 React.js 开发的 Web 组件库,参考 Bootstrap 设计,提供其中常用组件,支持响应式布局. 我 ...

  2. react.js 高阶组件----很简单的实例理解高阶组件思想

    调试代码之前,我设置了两个缓存 分别是username和content 在控制台console设置两个缓存代码 localStorage.setItem('username','老王')localSt ...

  3. 移动web端的react.js组件化方案

     背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...

  4. 【每天半小时学框架】——React.js的模板语法与组件概念

           [重点提前说:组件化与虚拟DOM是React.js的核心理念!]        先抛出一个论题:在React.js中,JSX语法提倡将 HTML 和 CSS 全都写入到JavaScrip ...

  5. React.js 小书 Lesson20 - 更新阶段的组件生命周期

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson20 转载请注明出处,保留原文链接和作者信息. 从之前的章节我们了解到,组件的挂载指的是将组件 ...

  6. React.js 小书 Lesson18 - 挂载阶段的组件生命周期（一）

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson18 转载请注明出处,保留原文链接和作者信息. 我们在讲解 JSX 的章节中提到,下面的代码: ...

  7. React.js 小书介绍

    React.js 小书 Github 关于作者 这是一本关于 React.js 的小书. 因为工作中一直在使用 React.js,也一直以来想总结一下自己关于 React.js 的一些知识.经验.于是 ...

  8. react.js插件开发,x-dailog弹窗浮层组件

    react.js插件开发,x-dailog弹窗浮层组件 我认为,每一个组件都应该有他自带的样式和属性事件回调配置.所以我会给x-dialog默认一套简单的样式,和各种默认的配置项.所有react插件示 ...

  9. 【前端知识体系-JS相关】组件化和React

    1. 说一下使用jQuery和使用框架的区别? 数据和视图的分离,(jQuery数据和视图混在一起,代码耦合)-------开放封闭原则 以数据驱动视图(只关注数据变化,DOM操作被封装) 2.说一下 ...

随机推荐

  1. ccs3中icon转换为字体的方法

    小图标转换为字体有几大优点 文件小,一般50k以内 避免了加载多个icons,减少了加载次数,有利于页面优化. 兼容性很好,可以随便放大缩小,都能正常显示. 维护起来也很简单,只用找到这个字体文件(比 ...

  2. Java web中为什么要用Service接口和DAO接口？

    面向接口:依赖倒转原理----使用service接口的原因是为了让表示层不依赖于业务层的具体实现,使用dao接口的原理也是如此,而且便于spring ioc容器,当修改dao层,时不需要修改servi ...

  3. n全排列输出和 n个数的组合(数字范围a~b)

    n全排列输出: int WPermutation(int num, bool bRepeat) num表示num全排列 bRepeat标志是否产生重复元素的序列. int Permutation(in ...

  4. linux创建子进程--fork()方法

    (1)fork()的定义 fork()函数是Unix中派生新进程的唯一方法,声明如下: #include <unistd.h> pid_t fork(void); 我们需要理解的是,调用一 ...

  5. Valid Number

    Validate if a given string is numeric. Some examples:"0" => true" 0.1 " => ...

  6. socket端口重复占用问题

    1.一个服务端进程在主动释放端口后(调用close)端口状态为TIME_WAIT,这时再去监听同样的端口,不论是否设置SO_REUSEADDR,都能监听成功,也能接收到客户端的连接,但是无法收到数据. ...

  7. Java for LintCode 链表插入排序

    用插入排序对链表排序 解题思路: 最省时间的方法是使用优先级队列,但是无法通过,那就直接插入排序好了. public ListNode insertionSortList(ListNode head) ...

  8. codeforces Educational Codeforces Round 5 A. Comparing Two Long Integers

    题目链接:http://codeforces.com/problemset/problem/616/A 题目意思:顾名思义,就是比较两个长度不超过 1e6 的字符串的大小 模拟即可.提供两个版本,数组 ...

  9. springmvc 文件下传、上载、预览。以二进制形式存放到数据库(转载)

    springmvc 文件上传.下载.预览.以二进制形式存放到数据库.数据库中的关于传入附件的字段我写了2个:一个存放内容accessory,一个存放文件的后缀filetype 上传:首先需要2个必须的 ...

  10. 【leetcode】Next Permutation（middle）

    Implement next permutation, which rearranges numbers into the lexicographically next greater permuta ...