码迷,mamicode.com
首页 > 其他好文 > 详细

Backbone视图渲染React组件

时间:2016-07-24 09:21:10      阅读:159      评论:0      收藏:0      [点我收藏+]

标签:

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="UTF-8" />
 5     <title></title>
 6     <script src="react/react-0.14.7/build/react.js"></script>
 7     <script src="react/react-0.14.7/build/react-dom.js"></script>
 8     <script src="react/browser.min.js"></script>
 9     <script type="text/ecmascript" src="app/scripts/vendor/jquery.min.js"></script>
10       <script src="app/scripts/vendor/underscore.js"></script>
11        <script src="app/scripts/vendor/backbone.js"></script>
12   </head>
13   <body>
14     <div id="example"></div>
15     <script type="text/babel">
16       var HelloMessage = React.createClass({
17         render: function() {
18           return <h1>Hello World!{this.props.name}</h1>;
19         }
20       });
21 
22       ReactDOM.render(
23         <HelloMessage />,
24         document.getElementById(example)
25       );
26 
27 
28        var MyView = Backbone.View.extend({
29   el: body,
30   template: <div class="widget-container"></div>,
31   render: function() {
32     this.$el.html(this.template);
33     var HM=React.createFactory(HelloMessage);   
34     ReactDOM.render(new HM({name:xxxxx}), this.$(.widget-container).get(0));
35     // ReactDOM.render( HM({name:‘xxxxx‘}), this.$(‘.widget-container‘).get(0));
36     //  ReactDOM.render(<HM  name=‘xiaoxiao‘/>), this.$(‘.widget-container‘).get(0));
37     //  ReactDOM.render(<HelloMessage  name=‘xiaoxiao‘/>), this.$(‘.widget-container‘).get(0));
38     return this;
39   }
40     });
41 
42         new MyView().render();
43     </script>
44   </body>
45 </html>

 

Backbone视图渲染React组件

标签:

原文地址:http://www.cnblogs.com/tiancai/p/5700064.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!