Join GitHub today
GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.Sign up
Possible to use React without a container element? #1970
We're switching Atom to React, but we want to support backward-compatible shims to our previous view framework.
In the old framework, views were represented as jQuery-wrapped DOM elements. Ideally, we'd like to provide backward-compatible shims by simply rendering the React component and wrapping its root element in a jQuery wrapper with an API that's compatible to our old editor views. That would essentially look like this:
var editorRoot = document.createElement('div') React.renderComponentWithRootElement(Editor(props), editorRoot) // the element would actually be wrapped in a custom subclass of jQuery, // but this is clearer for this example var editorShim = $(editorRoot)
Currently, this isn't possible because React components need to be rendered into a container. So instead we need to create a wrapper element and render the component inside it. This is sad because it adds an extra layer of markup which confuses styling, and also means that the editor has a wrapper when used via the shim layer but no wrapper when embedded as a child via React itself.
Is there something fundamental preventing React from adopting DOM nodes directly without the parent? Is this something we could even hack in in a way that would be somewhat maintainable?
It's a little tricky because (for example) what if Editor doesn't render a div but instead renders a span or some other tag? If
We are planning to do something similar though where you can render and call
I don't think I can help get rid of the extra wrapper div but perhaps you could do it consistently if you render some EditorWrapper component when rendering from React but with the shim layer, render Editor inside a div you make. Sorry I don't have a better suggestion.
I'm curious, if we add the constraint that the root component must have a fixed root DOM component type and that it must export its type as a static variable (yuck, but easy short-term solution). Then it seems like it should only require a few minor tweaks for you to get some temporary solution in-place until
Does that sound like an acceptable workaround?
@spicyj I love everything about the proposed API. I think it will really streamline integration of React into more heterogenous environments and also make it easier to support packages written in different versions of React by allowing the parent component to integrate manually through the DOM.
@syranide I would be totally fine with that workaround. The only component we'd currently need it for is the editor, and that's always a
This effectively removes the requirement of providing a fixed root container for React.render to use!