<!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组件的更多相关文章

  1. React Canvas：高性能渲染 React 组

    React Canvas 提供了使用 Canvas 渲染移动 Web App 界面的能力,替代传统的 DOM 渲染,具有更接近 Native App 的使用体验.React Canvas 提供了一组标 ...

  2. 深入了解React组件重新渲染的条件和生命周期

    React组件rerender的真正条件 当前组件的State中的属性改变时且当前组件的shouldcomponentupdate返回true,那么当前组件会rerender 组件的props中的任一 ...

  3. React组件的定义、渲染和传值总结

    一.组件的定义 1.使用JavaScript函数定义 Welcome.js import React from 'react'; function Welcome() { return ( <d ...

  4. uniapp-父组件数组变化同步子组件视图渲染

    项目中子组件封装的是一个picker,父组件需要传数组到子组件中. 如果父组件的数组出现变更,视图中的子组件或许不能直接刷新渲染,需要反复弹起几下才能看到. 试过深度监听,但都没有用,ref也不知道为 ...

  5. 野心勃勃的React组件生命周期

    当你还在写着Angular指令,过滤器,注入,服务,提供者,视图模版的时候,是不是觉得很烦,好在这个时候,React已经神一样的出现在历史舞台. React组件    React实现了UI=Fn(St ...

  6. React 组件开发初探

    react.js 在线地址:http://slides.com/yueyao/deck/#/ COMPONENT JSX 预编译语言, 一个基于ECMAscript 的xml-link 的语法扩展,最 ...

  7. 从性能角度看react组件拆分的重要性

    React是一个UI层面的库,它采用虚拟DOM技术减少Javascript与真正DOM的交互,提升了前端性能:采用单向数据流机制,父组件通过props将数据传递给子组件,这样让数据流向一目了然.一旦组 ...

  8. React组件设计

    React组件设计 组件分类 展示组件和容器组件 展示组件 容器组件 关注事物的展示 关注事物如何工作 可能包含展示和容器组件,并且一般会有DOM标签和css样式 可能包含展示和容器组件,并且不会有D ...

  9. React组件设计（转）

    React组件设计 组件分类 展示组件和容器组件 展示组件 容器组件 关注事物的展示 关注事物如何工作 可能包含展示和容器组件,并且一般会有DOM标签和css样式 可能包含展示和容器组件,并且不会有D ...

随机推荐

  1. elasticsearch高级配置之（二）----线程池设置

    elasticsearch 配置 线程池  一个Elasticsearch节点会有多个线程池,但重要的是下面四个:  索引(index):主要是索引数据和删除数据操作(默认是cached类型)  搜索 ...

  2. 3398: [Usaco2009 Feb]Bullcow 牡牛和牝牛

    3398: [Usaco2009 Feb]Bullcow 牡牛和牝牛 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 243  Solved: 167[S ...

  3. 【转】使用gulp 进行ES6开发

    原谅地址:https://segmentfault.com/a/1190000004394726 一说起ES6,总会顺带看到webpack.babel.browserify还有一些认都不认识的blab ...

  4. oracle数据库兼容mysql的差异写法

    1.sysdate改为sysdate(),或者now(); 2.nvl(expr1,expr2) 改为IFNULL(expr1,expr2) nvl2(expr1,expr2,expr3)改为 IF( ...

  5. One Bomb

    One Bomb time limit per test 1 second memory limit per test 256 megabytes input standard input outpu ...

  6. POJ 3624 Charm Bracelet 简单01背包

    题目大意:有n件珠宝,每个珠宝的魅力值为v,重量为w,求在重量不超过m的情况下能达到的最大魅力值. 题目思路:简单的01背包,由于二维数组会超内存所以应该压缩成一维数组. dp[i][j],表示选取i ...

  7. 学习Robot Framework必须掌握的库—-BuiltIn库

    作为一门表格语言,为了保持简单的结构,RF没有像别的高级语言那样提供类似if else while等内置关键字来实现各种逻辑功能,而是提供给了用户BuiltIn库.如果用户想在测试用例中实现比较复杂的 ...

  8. 之一 select模型

    // select.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <WinSock2.h> #include ...

  9. Android 手机红外遥控器实现（转）

    源:http://www.cnblogs.com/xiaochao1234/p/3615467.html 经过连续几天的编制,安卓手机代码终于完成了,目前已经将我宿舍,家里,集控室的红外遥控电气设备完 ...

  10. Java中的构造方法

    什么是构造方法:每一个类中至少有一个构造方法,它用于创建该类对象,这个和OC中的init有异曲同工之妙. 构造方法的格式:A:方法名与类名相同  B:没有返回值类型,没有void C:没有具体的返回值 ...