Backbone视图渲染React组件
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组件 的全部内容， 来源链接： utcz.com/z/382234.html
