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 ...
随机推荐
- LightOJ 1030 Discovering Gold（期望）
Description You are in a cave, a long cave! The cave can be represented by a 1 x N grid. Each cell o ...
- HDU - 5276 YJC tricks time
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5276 Sample Input 99000 0 Sample Output 00:01:30 ...
- 转：Selenium-Grid工作方式
Selenium-Grid版本 selenium-grid分为版本1和版本2,其实它的2个版本并不是和selenium的版本1和2相对应发布的[即selenium-grid2的发布比selenium2 ...
- 通过onActivityResult（）先跳转到联系人界面，然后把传回来的手机号显示到应用的EditText上
<pre name="code" class="plain"><pre name="code" class="p ...
- jq之简单的表单验证
<body> <form method="post" action=""> <div class="int"& ...
- codeforces div2 677 D
http://codeforces.com/problemset/problem/677/D 题目大意: 给你一个n*m的图,上面有p种钥匙(p<=n*m),每种钥匙至少有一个,期初所有为1的钥 ...
- 解决MyEclipse吃内存以及卡死的方法 （转）
前言:MyEclipse5.5 大小 139M:MyEclipse6.5 大小 451M:MyEclipse7.0 大小 649M!下载服务器又是国外的...下载速度累人也就罢了,只要你工作性能一流. ...
- 转: OGG Checkpoint 详解
1. OGG Checkpoint 详解 定位中断的位置,下次启动从中断的位置开始恢复. 1.target 端配置: 2.一条记录对应一个replicat 一. Extract Checkpoints ...
- python+mysql抓取百度新闻的标题存到数据库
#!usr/bin/python# -*- coding:utf-8 -*-import urllib2 import re import MySQLdb class BaiDuNews: def _ ...
- DWR整合之JSF
DWR 与 JSF DWR 包括两个 JSF 的扩展点,一个创造器和一个 ServletFilter. 1.JSF Creator DWR1.1 中有一个体验版的 JsfCreator.你可以在 dw ...