How to render a Backbone view inside a React component?

Question

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

I need to render my Backbone view and put it as an element inside my React module. My idea is to render the Backbone view and pass it into the React component. Then in my React component create componentDidMount and componentDidUpdate functions which will manually append my Backbone view to the DOM everytime my React element rerenders.

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

Answer 1

Just a quick take on this one since it's still unanswered, and I was looking for similar info. I think that your solution will work but potentially be detrimental in terms of performance.

It's not often used, but React does have dangerouslySetInnerHTML which could be used here. I would pass in the view as a prop, use view.$el.html() to retrieve the innerHTML string from the unmounted view, and pass that to dangerouslySetInnerHTML. You'll have to ensure that any of your event handlers properly attach and unattach on render and teardown.