3

Basically i would like to render the title element into the head element like this

<head>
  <HeadFragment />
</head>

this is only possible at the moment by actually rendering as the component, but this will cause all kinds of issues if you use external scripts that inject into the head.

i basically want

var HeadFragment = React.createClass({
    render: function () {
        return (<fragment>
            <title>{this.props.title}</title>
            ... meta ...
            ... styles ...
            ... scripts ...
        </fragment>)
    }
});

React.render(<HeadFragment />, document.querySelector('head'));

but the fragment node should not be an actual DOM node, instead it would be a document fragment.

without this support it makes full page rendering pretty much impossible, and forces us to do a bunch of other stuff in order to modify things like this without breaking the HTML spec.

Chad Cache
  • 9,668
  • 3
  • 56
  • 48
  • Have you tried using an actual document fragment as the `render` target? https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment – WiredPrairie Apr 06 '15 at 10:37
  • that doesn't work, but even if it did i would still have to render out the component with a wrapper node then append to a fragment which defeats the purpose. – Chad Cache Apr 09 '15 at 10:36
  • I'm not clear what problem you're trying to solve ... Is using the Virtual DOM to render the head needed? It's definitely not the sweet spot for React as you can see. – WiredPrairie Apr 09 '15 at 11:17
  • Possible duplicate of [How do I render sibling elements without wrapping them in a parent tag?](http://stackoverflow.com/questions/28371370/how-do-i-render-sibling-elements-without-wrapping-them-in-a-parent-tag) – Robbie Wxyz Aug 08 '16 at 20:52
  • @RobbieWxyz Well not really, but heres a better answer http://stackoverflow.com/questions/25034994/how-to-correctly-wrap-few-td-tags-for-jsxtransformer/25035225#25035225 , and while we are at it https://github.com/nfl/react-helmet – Chad Cache Aug 09 '16 at 05:37

1 Answers1

2

Modifying document fragments like the whole html container, head, and such are just completely undependable. There's been a lot of chatter about this in the past like here: https://groups.google.com/forum/#!topic/reactjs/4jI5xe7TXzQ and on GH and such.

There are projects like https://github.com/matthewwithanm/react-frozenhead which try to do the correct updates based on what you provide, like changing the title using document.setTitle and such, but yeah.

kakigoori
  • 1,218
  • 10
  • 20
  • with the FrozenHead solution you posted does that also work with meta, style, script... then just remaps title? – Chad Cache Apr 06 '15 at 21:29