15

Some of the non-react libraries I'm using perform some DOM generation with javascript. Ideally, I'd like this to occur in react's render cycle but react doesn't implement some DOM functions.

ie. one library wants to create a fragment for showing a title (using jQuery) which in turn ends up calling document.createDocumentFragment.

A simple work around is to have the library do it's rendering on component mount or update. But I'm trying to render using the virtual DOM. Is there a better approach to re-creating or porting the library?

Artjom B.
  • 61,146
  • 24
  • 125
  • 222
Dave Protasowski
  • 191
  • 2
  • 6
  • 1
    I'm pretty sure there isn't. It's really too bad that so many JS / jQ libraries did not bother to separate their visual representation from their logic. We really wanted to use [FullCalendar](http://fullcalendar.io/) in a Reflux store, just for it's ability to manage a data structure that represents events on a calendar. Unfortunately, it looks like it would take almost as much work to separate it from its current interface as it would to rewrite it using React and Reflux. – Dan Ross Feb 24 '15 at 11:17
  • It is possible to incorporate jQuery plugins into a React component, but it isn't pretty or efficient. After every render, the jQuery plugin would probably have to be reinitialized. http://stackoverflow.com/questions/25436445/using-jquery-plugins-that-transform-the-dom-in-react-components – Dan Ross Feb 24 '15 at 11:19

1 Answers1

9

You need a "Portal". Take a look at https://github.com/ryanflorence/react-training/blob/gh-pages/lessons/05-wrapping-dom-libs.md This explains the solution very well, like so:

Methodology:

  1. DOM libs usually manipulate the DOM
  2. React tries to re-render and finds a different DOM than it had last time and freaks out
  3. We hide the DOM manipulation from React by breaking the rendering tree and then reconnecting around the DOM the lib manipulates.
  4. Consumers of our component can stay in React-land.
Ville
  • 4,088
  • 2
  • 37
  • 38
Martin Schmid
  • 279
  • 3
  • 6