javascript - React + Backbone, Target container is not a DOM element -


note: react error being thrown.

so trying experiment render post component backbone router based on page. know not typically things way, things can messy , such. again it's experiment.

so have following route in backbone (note react call):

aisiswriter.routers.posts = backbone.router.extend({    writer_posts: null,    posts: null,    mountnode: $('#blog-manage'),    routes : {       '': 'index'   },    initialize: function() {     this.writer_posts = new aisiswriter.collections.posts();   },    index: function() {     var options = { reset: true };     this.writer_posts.fetch(options).then(this.postsrecieved, this.servererror);   },    // deal posts received   postsrecieved: function(collection, response, options) {     this.posts = collection;      // walk through posts.     $.each(this.posts, function(key, value){       // value array of objects.       $.each(value, function(index, post_object){         react.rendercomponent(new post({post: post_object}), this.mountnode);       });     });   },    // deal server errors   servererror: function() {     console.log('there error trying fetch posts.');   }  }); 

the idea should spit out post title on page, 1 right after other (i have feeling once).

but issue console saying:

uncaught error: invariant violation: _registercomponent(...): target container not dom element.

is because of how trying render component?

react.rendercomponent renders component real dom element. exception being thrown because aren't passing dom element required second argument.

reactcomponent rendercomponent(   reactcomponent component,   domelement container,   [function callback] ) 

render react component dom in supplied container , return reference component.

if want html react, can use react.rendercomponenttostaticmarkup instead.


Comments

Popular posts from this blog

php - render data via PDO::FETCH_FUNC vs loop -

c++ - OpenCV Error: Assertion failed <scn == 3 ::scn == 4> in unknown function, -

The canvas has been tainted by cross-origin data in chrome only -