<!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. java 设计模式之工厂模式与反射的结合

    工厂模式: /**  * @author Rollen-Holt 设计模式之 工厂模式  */   interface fruit{     public abstract void eat(); } ...

  2. QQ的邮我功能

    首先是从QQ邮箱中获取到“邮我”的功能获取代码,然后点击后就可以直接的设定好收件人为自己了. 给我写信

  3. zabbix企业应用之bind dns监控（转）

    继续介绍zabbix监控企业应用的实例,本次介绍zabbix监控dns,我监控的dns为bind 9.8.2,本dns为公网dns,是为了解决公司内网服务器自动化所需求的dns解析,比如目前的pupp ...

  4. vm lxc

    taxonomy, 有4种: 进程虚拟机:1.相同指令集(wine),2.不同指令集(java)系统虚拟机:3.相同指令集(kvm),4.不同指令集(qemu) 第4种又可分为直接运行于硬件之上(xe ...

  5. 5V与3.3V器件电平转换

    源:5V与3.3V器件电平转换 当你使用3.3V的单片机的时候,电平转换就在所难免了,经常会遇到3.3转5V或者5V转3.3V的情况,这里介绍一个简单的电路,他可以实现两个电平的相互转换(注意是相互哦 ...

  6. SDAU课程练习--problemA(1000)

    题目描述 The famous ACM (Advanced Computer Maker) Company has rented a floor of a building whose shape i ...

  7. Quartz总结（一）：Quartz集成Spring的2个方法

    零.引言 关于Spring集成Quartz有2种方法: 1. JobDetailBean. 2. MethodInvokeJobDetailFactoryBean. 以下从自身使用和理解以及掌握的知识 ...

  8. BootStrap中关于input-group的问题（未解决）

    ****************************************2016年1月6日 23:08******************************* 本来想实现的如下功能: 但 ...

  9. web beacon

    网络臭虫又叫 网络信标(Web beacon), 是可以暗藏在任何网页元素或邮件内的1像素大小的透明GIF或PNG图片 可以理解为<img src="http://www.webbea ...

  10. w3school之JavaScript学习笔记

    在前端测试过程中,少不了听到开发说到JS,JS在webJavaScript 是浏览器脚本语言(简称JS),主要用来向HTML页面添加交互行为. 学习网址:http://www.w3school.com ...