Backbone视图渲染React组件

 <!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组件

最新文章

热门文章
