How to render a Backbone view inside a React component?

Question

We are porting our Backbone app to use React and Redux. I am creating a new function using React / Redux, but this requires a textInputView, which is currently in Backbone. This textInputView is very bulky and has advanced features that prevent me from porting it to React at this time.

I need to display a Backbone view and put it as an element inside my React module. My idea is to display the Backbone view and pass it to the React component. Then, in my React component, create the componentDidMount and componentDidUpdate functions, which will manually add my Backbone view to the DOM every time the React elements are redirected.

I think this will work, but it seems messy. Are there cleaner solutions?

Answer 1

Just grab this one quickly, as it is still unanswered, and I was looking for similar information. I think your solution will work, but could potentially be harmful in terms of performance.

It is not often used, but React has dangerouslySetInnerHTML , which can be used here. I would pass the view as a support using view.$el.html() to retrieve the innerHTML string from the unmounted view and pass it to dangerouslySetInnerHTML . You will need to make sure that any of your event handlers are properly attached and detached when rendering and detaching.