Backbone视图渲染React组件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<script src="react/react-0.14.7/build/react.js"></script>
<script src="react/react-0.14.7/build/react-dom.js"></script>
<script src="react/browser.min.js"></script>
<script type="text/ecmascript" src="app/scripts/vendor/jquery.min.js"></script>
<script src="app/scripts/vendor/underscore.js"></script>
<script src="app/scripts/vendor/backbone.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello World!{this.props.name}</h1>;
}
}); ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
); var MyView = Backbone.View.extend({
el: 'body',
template: '<div class="widget-container"></div>',
render: function() {
this.$el.html(this.template);
var HM=React.createFactory(HelloMessage);
ReactDOM.render(new HM({name:'xxxxx'}), this.$('.widget-container').get(0));
// ReactDOM.render( HM({name:'xxxxx'}), this.$('.widget-container').get(0));
// ReactDOM.render(<HM name='xiaoxiao'/>), this.$('.widget-container').get(0));
// ReactDOM.render(<HelloMessage name='xiaoxiao'/>), this.$('.widget-container').get(0));
return this;
}
}); new MyView().render();
</script>
</body>
</html>
Backbone视图渲染React组件的更多相关文章
- React Canvas:高性能渲染 React 组
React Canvas 提供了使用 Canvas 渲染移动 Web App 界面的能力,替代传统的 DOM 渲染,具有更接近 Native App 的使用体验.React Canvas 提供了一组标 ...
- 深入了解React组件重新渲染的条件和生命周期
React组件rerender的真正条件 当前组件的State中的属性改变时且当前组件的shouldcomponentupdate返回true,那么当前组件会rerender 组件的props中的任一 ...
- React组件的定义、渲染和传值总结
一.组件的定义 1.使用JavaScript函数定义 Welcome.js import React from 'react'; function Welcome() { return ( <d ...
- uniapp-父组件数组变化同步子组件视图渲染
项目中子组件封装的是一个picker,父组件需要传数组到子组件中. 如果父组件的数组出现变更,视图中的子组件或许不能直接刷新渲染,需要反复弹起几下才能看到. 试过深度监听,但都没有用,ref也不知道为 ...
- 野心勃勃的React组件生命周期
当你还在写着Angular指令,过滤器,注入,服务,提供者,视图模版的时候,是不是觉得很烦,好在这个时候,React已经神一样的出现在历史舞台. React组件 React实现了UI=Fn(St ...
- React 组件开发初探
react.js 在线地址:http://slides.com/yueyao/deck/#/ COMPONENT JSX 预编译语言, 一个基于ECMAscript 的xml-link 的语法扩展,最 ...
- 从性能角度看react组件拆分的重要性
React是一个UI层面的库,它采用虚拟DOM技术减少Javascript与真正DOM的交互,提升了前端性能:采用单向数据流机制,父组件通过props将数据传递给子组件,这样让数据流向一目了然.一旦组 ...
- React组件设计
React组件设计 组件分类 展示组件和容器组件 展示组件 容器组件 关注事物的展示 关注事物如何工作 可能包含展示和容器组件,并且一般会有DOM标签和css样式 可能包含展示和容器组件,并且不会有D ...
- React组件设计(转)
React组件设计 组件分类 展示组件和容器组件 展示组件 容器组件 关注事物的展示 关注事物如何工作 可能包含展示和容器组件,并且一般会有DOM标签和css样式 可能包含展示和容器组件,并且不会有D ...
随机推荐
- elasticsearch高级配置之(二)----线程池设置
elasticsearch 配置 线程池 一个Elasticsearch节点会有多个线程池,但重要的是下面四个: 索引(index):主要是索引数据和删除数据操作(默认是cached类型) 搜索 ...
- 3398: [Usaco2009 Feb]Bullcow 牡牛和牝牛
3398: [Usaco2009 Feb]Bullcow 牡牛和牝牛 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 243 Solved: 167[S ...
- 【转】使用gulp 进行ES6开发
原谅地址:https://segmentfault.com/a/1190000004394726 一说起ES6,总会顺带看到webpack.babel.browserify还有一些认都不认识的blab ...
- oracle数据库兼容mysql的差异写法
1.sysdate改为sysdate(),或者now(); 2.nvl(expr1,expr2) 改为IFNULL(expr1,expr2) nvl2(expr1,expr2,expr3)改为 IF( ...
- One Bomb
One Bomb time limit per test 1 second memory limit per test 256 megabytes input standard input outpu ...
- POJ 3624 Charm Bracelet 简单01背包
题目大意:有n件珠宝,每个珠宝的魅力值为v,重量为w,求在重量不超过m的情况下能达到的最大魅力值. 题目思路:简单的01背包,由于二维数组会超内存所以应该压缩成一维数组. dp[i][j],表示选取i ...
- 学习Robot Framework必须掌握的库—-BuiltIn库
作为一门表格语言,为了保持简单的结构,RF没有像别的高级语言那样提供类似if else while等内置关键字来实现各种逻辑功能,而是提供给了用户BuiltIn库.如果用户想在测试用例中实现比较复杂的 ...
- 之一 select模型
// select.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <WinSock2.h> #include ...
- Android 手机红外遥控器实现(转)
源:http://www.cnblogs.com/xiaochao1234/p/3615467.html 经过连续几天的编制,安卓手机代码终于完成了,目前已经将我宿舍,家里,集控室的红外遥控电气设备完 ...
- Java中的构造方法
什么是构造方法:每一个类中至少有一个构造方法,它用于创建该类对象,这个和OC中的init有异曲同工之妙. 构造方法的格式:A:方法名与类名相同 B:没有返回值类型,没有void C:没有具体的返回值 ...