react.js 多个组件集成示例
这个看得有点懵,
可能要结合其它实例看。
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 多个组件集成示例的更多相关文章
- RSuite 一个基于 React.js 的 Web 组件库
RSuite http://rsuite.github.io RSuite 是一个基于 React.js 开发的 Web 组件库,参考 Bootstrap 设计,提供其中常用组件,支持响应式布局. 我 ...
- react.js 高阶组件----很简单的实例理解高阶组件思想
调试代码之前,我设置了两个缓存 分别是username和content 在控制台console设置两个缓存代码 localStorage.setItem('username','老王')localSt ...
- 移动web端的react.js组件化方案
背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...
- 【每天半小时学框架】——React.js的模板语法与组件概念
[重点提前说:组件化与虚拟DOM是React.js的核心理念!] 先抛出一个论题:在React.js中,JSX语法提倡将 HTML 和 CSS 全都写入到JavaScrip ...
- React.js 小书 Lesson20 - 更新阶段的组件生命周期
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson20 转载请注明出处,保留原文链接和作者信息. 从之前的章节我们了解到,组件的挂载指的是将组件 ...
- React.js 小书 Lesson18 - 挂载阶段的组件生命周期(一)
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson18 转载请注明出处,保留原文链接和作者信息. 我们在讲解 JSX 的章节中提到,下面的代码: ...
- React.js 小书介绍
React.js 小书 Github 关于作者 这是一本关于 React.js 的小书. 因为工作中一直在使用 React.js,也一直以来想总结一下自己关于 React.js 的一些知识.经验.于是 ...
- react.js插件开发,x-dailog弹窗浮层组件
react.js插件开发,x-dailog弹窗浮层组件 我认为,每一个组件都应该有他自带的样式和属性事件回调配置.所以我会给x-dialog默认一套简单的样式,和各种默认的配置项.所有react插件示 ...
- 【前端知识体系-JS相关】组件化和React
1. 说一下使用jQuery和使用框架的区别? 数据和视图的分离,(jQuery数据和视图混在一起,代码耦合)-------开放封闭原则 以数据驱动视图(只关注数据变化,DOM操作被封装) 2.说一下 ...
随机推荐
- PHP开发神器——phpstorm
常用快捷键 快捷键 说明 ctrl+j 插入活动代码提示 ctrl+alt+t 当前位置插入环绕代码 alt+insert 生成代码菜单 Shift + Enter 新一行 ctrl+q 查看代码注释 ...
- ja
import java.util.*; class animal{ void cry(){ } void get_animal_name(){ ...
- Java abstract
abstract修饰符可以修饰类和方法. (1)abstract修饰类,会使这个类成为一个抽象类,这个类将不能生成对象实例,但可以做为对象变量声明的类型,也就是编译时类型.抽象类就相当于一类的半成品, ...
- Maven打包附加配置文件
在build节点下增加resources. <build> <!-- 资源 --> <resources> <!-- 复制非class文件 --> &l ...
- phpcms评论的url替换问题
在整个项目改ip之前,评论里的url是127.0.1.113 改成localhost之后,更新了所有的url和缓存,但是v9_comment表中的url字段没有更新. 想一下后台只有一个地方是替换数据 ...
- win7下配置Apache本地虚拟主机
我们有时候从网上下载下来的php源码很多都是应用在网站根目录下的,而我们又想在本地先测试一遍确定没有问题了再上传空间,但一换到子目录下的时候因为路径问题,使得许多图片.内容都无法显示. 这个时候我们就 ...
- Lua简易入门教程
环境:lua for windows (lfW)主页:http://luaforwindows.luaforge.net/https://code.google.com/p/luaforwindows ...
- Linux下安装Scala
Linux下安装Scala和Windows下安装类似,步骤如下: 首先访问下载链接:http://www.scala-lang.org/download/默认这里下载的是Windows版本,这时点击上 ...
- BestCoder25 1001.Harry and Magical Computer(hdu 5154) 解题报告
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5154 题目意思:有 n 门 processes(编号依次为1,2,...,n),然后给出 m 种关系: ...
- 【leetcode】Distinct Subsequences(hard)
Given a string S and a string T, count the number of distinct subsequences of T in S. A subsequence ...