score:0

I recommend using renderToStaticMarkup over renderToString as it does not add any extra DOM attributes that React uses internally, like `data-reactroot:

import { renderToStaticMarkup } from 'react-dom/server'

getString() {
  return renderToStaticMarkup(<AnyComponent />)
}

Documentation:

score:9

From what I see, you are getting what you'd expect to get.

Given a root element (aDom in your case), ReactDOM will render it's root component inside this element, and this component's element will have the attribute data-reactroot.

So what you are seeing is exactly how it should be. From what I've tested, the inner dom tree should be there as well.

var Another = React.createClass({
  render: function() {
    return (
      <div>Just to see if other components are rendered as well</div>
    );
  }
});

var Hello = React.createClass({
  render: function() {
    return (
      <div id="first"> 
        <div id="sec-1">Hello</div>
        <div id="sec-2">{ this.props.name }</div>
        <Another />
      </div>
    );
  }
});

var a = document.createElement('div');

ReactDOM.render(
  <Hello name = "World" /> ,
  a
);

console.log(a.outerHTML);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

The result in the console is:

<div><div data-reactroot="" id="first"><div id="sec-1">Hello</div><div id="sec-2">World</div><div>Just to see if other components are rendered as well</div></div></div>

score:91

This seems to work just fine if you want to render any component to a HTML string:

import { renderToString } from 'react-dom/server'

renderToString() {
  return renderToString(<MyAwesomeComponent some="props" or="whatever" />)
}

Related Query

More Query from same tag