Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React.js: Bind to Existing Elements

In Backbone.js, you can specify a view's element by using the el property or by calling view.setElement().

Is there an equivalent way of hooking up a React.js component to an existing DOM element?

like image 202
cantera Avatar asked Feb 06 '14 21:02

cantera


Video Answer


1 Answers

I'm not overly familiar with Backbone, but to hook a React component into the DOM you use the renderComponent function. The first arg is the component, and the second is a DOM element:

React.renderComponent(<SampleComponent />, document.getElementById('app'));

Updated per the context given in the comments:

React hooks up to an element by replacing its contents, but not the element itself. You can call renderComponent() more than once on that element and it will run the same diff algorithm each time. This is handy if you want to pass in different props, pre-render on the server, or render a different component entirely. The same process is used to update the actual DOM each time, just like if you were to use setState() within the component itself.

like image 131
Michael LaCroix Avatar answered Nov 15 '22 10:11

Michael LaCroix