这个看得有点懵，

可能要结合其它实例看。

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. tomcat管理端的页面安全措施

    由于公司的项目并未启用nginx负载均衡,所以自然也没用到tomcat与web应用一对一的安全操作,经常会遇到 重启单个应用又不想重启tomcat的情况.同时,又出于安全考虑,将tomcat的默认管理 ...

  2. BZOJ 3827: [Poi2014]Around the world

    Sol 并查集. 一个点所能到达的最远是单调不降的.然后将链延长到两倍,预处理出每个点到达的最远点,然后倒着计算深度. 再然后一直跳,跳到>=x+n的点,因为跳到的点都能到最终的点,并且不影响后 ...

  3. ARPACK在window visual Studio的安装配置

    ARPACK是一个求解大规模稠密/稀疏矩阵问题的库,最近在做特征值问题时用到.ARPACK这库相当古老,最早是RICE的一帮人弄的.LAPACK也差不多,貌似是美帝某个.gov发起的.这俩源代码是Fo ...

  4. django debug toolbar jquery加载配置

    默认加载谷歌cdn的jquery: 显然国内是会悲剧的. 破解方案: 在settings.py中增加以下配置: DEBUG_TOOLBAR_CONFIG = {"JQUERY_URL&quo ...

  5. oracle数据库两表数据比较

    本文转自http://blog.sina.com.cn/s/blog_3ff4e1ad0100tdl2.html 1 引言 在程序设计的过程中,往往会遇到两个记录集的比较.如华东电网PMS接口中实现传 ...

  6. 使用jsvc启动tomcat

    1.在/usr/local/apache-tomcat-7.0.68/bin中有commons-daemon-native.tar.gz  压缩包 2.解压commons-daemon-native. ...

  7. Linux下常用的硬件信息查看命令

    1.查看CPU型号,这里为了方便查看结合管道符用grep进行了匹配,当然只需要前面的命令也可以,命令如下: cat /proc/cpuinfo | grep "model name" ...

  8. 利用FFmpeg生成视频的缩略视频 v8.3

    目前生成视频缩略图的工具大多数是生成静态的图片,为了解决这样的局限性,这 次春节期间搞了个利用 FFMpeg 能生成缩略动态视频的批处理. 把 Make_NxM_videos.bat LED_font ...

  9. Enum:Fliptile(POJ 3279)

    Fliptile 题目大意:农夫想要测牛的智商,于是他把牛带到一个黑白格子的地,专门来踩格子看他们能不能把格子踩称全白 这一题其实就是一个枚举题,只是我们只用枚举第一行就可以了,因为这一题有点像开关一 ...

  10. VC++ 之常见内存异常值

    0 VC++ 常见的内存异常值 * 0xcccccccc : Used by Microsoft's C++ Debugging runtime library to mark uninitialis ...