Material Fill component in Trunk mode
I am getting React error:
Error: Invariant violation: _registerComponent (...): Target container is not a DOM element.
I think I know what the problem is, but I don't know how to solve it. The problem is, I want to reference the id of the div element in the render function, but the html in the render function has not yet been provided by the DOM by the time I want to insert something into that html. So my question is, how can I refer to the id of the html element from my render function, before it gets passed to the DOM? this has become what I consider to be a jQuery question.
Here's the code in a simple Backbone.View render function:
var self = this;
var ret = EJS.render(template, {});
this.$el.html(ret); //nice, but hasn't been rendered to the DOM yet
React.render(
<TimerExample start={Date.now()} />,
self.el //this works no problemo
);
React.render(
<MenuExample items={ ['Home', 'Services', 'About', 'Contact us'] } />,
$('#react-menu-example-div-id')[0] //this is *not* working, what is the right call here, so that this view can coexist with the above React view?
);
the first call React.render
works if it's on its own. But the second React.render file doesn't work and it throws an error.
My template looks like this:
<div>
<div id="react-menu-example-div-id">menu example goes here</div>
</div>
my Backbone.View in question creates its own el. What I'm trying to do might be totally a blow - I just want to display two separate / unrelated / different React components in the same Backbone view. Is there a good example for this?
source to share
Your first render statement in self.el replaces the DOM content for that element. Thus, by the time your second render call is made, # div-menu-example-div no longer exists. You can fix this simply by pointing to another element inside the parent. Though in general I think it would be better to have as much of your templating / rendering in React as possible, rather than using the trunking view for too many templates.
Below is an example of rendering for two different IDs within the same master view.
https://jsfiddle.net/sa4vvtjL/2/
Template
<div id="search_container">a</div>
<script type="text/template" id="search_template">
<div>
<div id="placeholder1"></div>
<div id="react-menu-example-div-id"></div>
</div>
</script>
Js
var Hello = React.createClass({
render: function(){
return (<div> {this.props.start} </div>)
}
});
var Hello2 = React.createClass({
render: function(){
return (<div> lala </div>)
}
});
var SearchView = Backbone.View.extend({
initialize: function () {
this.render();
},
render: function () {
var template = _.template($("#search_template").html(), {});
this.$el.html(template);
React.render(
<Hello start={Date.now()} />,
$('#placeholder1')[0]
);
React.render(
<Hello2 />,
$('#react-menu-example-div-id')[0]
);
}
});
var search_view = new SearchView({
el: $("#search_container")
});
source to share
Which actually says that the element with id id-response-menu-example-div-id is not yet listed on the page.
I can see that you are using jquery, so why not:
$(document).ready(function() {
React.render(
<MenuExample items={ ['Home', 'Services', 'About', 'Contact us'] } />,
$('#react-menu-example-div-id')[0]
);
});
source to share