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 ...
随机推荐
- rabbitmq用于分布式系统
上文介绍了RabbitMQ在linux下的安装,这里就简单的介绍一下基于RabbitMQ的开发.RabbitMQ已经提供了一大坨材料. Java – http://www.RabbitMQ.com/j ...
- USACO Section 1.3 Combination Lock 解题报告
题目 题目描述 农夫John的牛从农场逃脱出去了,所以他决定用一个密码锁来把农场的门锁起来,这个密码锁有三个表盘,每个表盘都是环形的,而且上面刻有1~N,现在John设了一个开锁密码,而且这个锁的设计 ...
- Servlet程序开发--Servlet简介
使用java语言开发的服务器端程序,可以生成动态web页,运行在服务器端,由服务器调用执行,是一种按照servlet标准开发的类. 先有servlet,后有jsp,jsp骨子里依然是servlet. ...
- MySQL解决"is marked as crashed and should be repaired"故障
具体报错如下: Table '.\Tablename\posts' is marked as crashed and should be repaired 提示说论坛的帖子表posts被标记有问题,需 ...
- zf-关于注册码全部错误的解决方法
之所以错误,是因为这里的用户名称是石首市政务服务中心. 在数据库里把这个字段改成 上海卓繁 就可以了 一般都是在 SYS_INFO 这张表里面改
- PL/SQL DEVELOPER 导出表数据
http://jingyan.baidu.com/album/fcb5aff78e6a48edab4a7146.html?picindex=4 1. 导出表数据 打开pl/sql客户端 在左侧 点击t ...
- 救援行动(save)
救援行动(save) 题目描述 Angel被人抓住关在一个迷宫了!迷宫的长.宽均不超过200,迷宫中有不可以越过的墙以及监狱的看守.Angel的朋友带了一个救援队来到了迷宫中.他们的任务是:接近Ang ...
- UISegmentedControl 踩坑
@interface JLMyContactsViewController () @property (nonatomic, strong) UIImageView *navImageView; ...
- 荐 android 如何打包自定义控件（转）
荐 android 如何打包自定义控件(转) 目录[-] 方式一:将项目打包成jar包 方式二:项目作为一个library 设计自定义的控件对android开发人员来说,是家常便饭了,但是多次做项 ...
- MySQL5.7绿色版安装
1. 下载MySQL 5.7,地址:http://dev.mysql.com/downloads/mysql/ (选择32位或者64位版本需根据自身PC情况) 2. 下载后解压,比如我的目录结构是: ...