<!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. HDU1874 最短路 SPFA

    最短路 Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 24  Solved: 17 [Submit][Status][Web Board] Descr ...

  2. vbs打包exe工具

    工具下载:http://yunpan.cn/cceRRbszUt5MC  访问密码 66e2

  3. 动态规划之----我们可以用2*1的小矩形横着或者竖着去覆盖更大的矩形。请问用n个2*1的小矩形无重叠地覆盖一个2*n的大矩形，总共有多少种方法？

    利用动态规划,一共有n列,若从左向右放小矩形,有两种放置方式: 第一种:横着放,即占用两列.此时第二行的前两个空格只能横着放,所有,总的放置次数变为1+num(2*(n-2)),其中2*(n-2)代表 ...

  4. js 基础对象一

    JavaScript 通常用于操作 HTML 元素. Document元素 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页 ...

  5. PAT (Advanced Level) 1101. Quick Sort (25)

    树状数组+离散化 #include<cstdio> #include<cstring> #include<cmath> #include<map> #i ...

  6. HDU 5480 Conturbatio

    区间求和不更新,开个数组记录一下前缀和就可以了 #include<cstdio> #include<cstring> #include<cmath> #includ ...

  7. Android中在布局中写ViewPager无法渲染出来的问题

    今天刚刚使用Android Studio,在写ViewPager时,首先按F4把Dependencies添加一个V4包,然后写ViewPager,如下: <android.support.v4. ...

  8. angular实现select的ng-options4

    ng实现简单的select <div ng-controller="ngSelect"> <select ng-model="vm.selectVal& ...

  9. chrome下如何显示打开网页的IP地址

    Website IP:装上之后在网页右下角能够显示当前访问网页的IP地址,这个对定位哪台前端机是有问题的,特别有帮助.

  10. 浅谈ssh(struts,spring,hibernate三大框架)整合的意义及其精髓

    hibernate工作原理 原理: 1.读取并解析配置文件 2.读取并解析映射信息,创建SessionFactory 3.打开Sesssion 4.创建事务Transation 5.持久化操作 6.提 ...