Support DOM nodes as children

[syranide]

It would be nice to be able to do the equivalent of <div>{document.createElement('div')}</div>. It seems entirely doable now with our new fancy renderer I think? Obviously it wouldn't be supported for SSR though so you would have to provide your own fallback if necessary.

[jquense]

this seems fun :) what would be the use case though?

[syranide]

Just like dangerouslySetInnerHTML for a React container or creating an empty container and adding my nodes to that, it would be nice if my dynamically generated nodes could live directly alongside React nodes. So it's the same use-cases people use those for today, but without requiring a wrapping container.

[quantizor]

This would be useful. I'm actually doing behaviors like this in an infinite tableview implementation by attaching the subtree on componentDidMount/componentDidUpdate.

[jimfb]

This would also mean you can't run in a worker or anywhere that requires crossing a serialization boundary (eg. react-native). My guess is that we wouldn't want to do this.

[quantizor]

[edit] nevermind, I see what you meant

[syranide]

@jimfb As far as I understand it all DOM manipulation still has to occur in the main thread, so I imagine there is a similar/alternative API that would allow this to work in a worker (but yes, you can't pass a raw node like this in render).

Also, I imagine there are use-cases for this in react-native too, but obviously using (equivalent) native handles instead if that is or will be supported (don't know).

Anyway, I understand this would be low prio regardless, but considering empty containers are blessed for interop I'd think it would make sense to also enable doing away with the containers to improve interop with other libraries/techs (considering there is no transparent node type).

[blainekasten]

Maybe another use case for Compositor Worker?

[jimfb]

Note (mostly to self): Another problem is that jsx elements can be inserted multiple times, but DOM elements can not.

This is a valid component:

function MyComponent() { return <div><div class="foo">{this.props.children}</div><div class="bar">{this.props.children}</div></div>}
ReactDOM.render(document.createElement('div'), document.createElement('div'));

[ghost]

Hmm. Clone the elements?

[jimfb]

@JaRail You can't clone DOM nodes, since the whole point here would be to retain referential identity.

[ghost]

@jimfb Not sure I follow. Are you meaning in regards to external event handlers and references to the DOM node? I was thinking of this concept more as a way to create a template node that's never attached to the document. Cloning can be faster in some cases I believe.

Rather than creating a new element in the render() itself, include a ref (the js object) to an unattached element in the return. That element gets cloned rather than attached.

Wouldn't be so hot for updates though. Well, I guess returning the same object means you don't need to clone it again.

[syranide]

@jimfb Oh right that's true, but if there's a good error message to go with it I don't really see it being a issue in practice, but yeah you're right :)

@JaRail cloning nodes is technically possible, but does not really make sense in this context IMHO. This is not about displaying a "hierarchy like the node" provided, but inserting that exact node so whatever created it can still function as intended.

[gaearon]

If you’re still interested in this, I think we’ll need an RFC to continue the discussion.
https://github.com/reactjs/rfcs