<!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. UVALive - 4026 Difficult Melody（暴力）

    我这个英语学渣又把题给翻译错了……(话说,六级差十分没有过,好心疼T T),题目中说的P和Q都是计算game的个数,我以为是出现的次数,各种wa..后来调整了以后又是各种wa,原来是double型的数 ...

  2. leetcode202（Floyd判圈算法（龟兔赛跑算法））

    Write an algorithm to determine if a number is "happy". 写出一个算法确定一个数是不是快乐数. A happy number ...

  3. Struts2 语法--异常处理

    1. UsersDAO.java里产生一个例外: System.out.println(1/0); 2. 调用DAO的UsersAction1.java 的execute方法, 加抛异常: publi ...

  4. centos dmesg

    linux dmesg命令详解   功能说明:显示开机信息. 语 法:dmesg [-cn][-s ] 补充说明:kernel会将开机信息存储在ring buffer,若是开机时来不及查看信息,可利用 ...

  5. UIImageView动画

    NSMutableArray *arrM = [NSMutableArray array]; // 2.加载所有图片 ; i <= ; i++) { NSString *imageName = ...

  6. UIApplication 用法解析

    UIApplication,代表的是整个应用做的事,因此每个程序只能有一个,系统使用的是单例模式,就是上面的[UIApplication sharedApplication]来得到一个实例.这个单例实 ...

  7. Android之EditText控件

    <EditText android:layout_width="fill_parent" android:layout_height="wrap_content&q ...

  8. 2015浙江财经大学ACM有奖周赛（一） 题解报告

    2015浙江财经大学ACM有奖周赛(一) 题解报告 命题:丽丽&&黑鸡 这是命题者原话. 题目涉及的知识面比较广泛,有深度优先搜索.广度优先搜索.数学题.几何题.贪心算法.枚举.二进制 ...

  9. 基于POI的Excel导入导出（JAVA实现）

    今天做了个excel的导入导出功能,在这记录下. 首先现在相关poi的相关jar包,资源链接:http://download.csdn.net/detail/opening_world/9663247 ...

  10. [iOS]C语言技术视频-14-指针变量高级用法(函数指针)

    下载地址: 链接: http://pan.baidu.com/s/1ykyg2 密码: fg5t