How to save or cache a Component's html? - reactjs

Question

I know you can store a Component state and alter it so that the element is "re rendered", however in my use case, there is a situation I have where the rendering is just not up to speed.
What im looking for is that once a Component has been rendered, I want its html code, including the html of its children.
Maybe something along the lines of:
render() {
return(
<ChildComponent/>
);
}
componentDidMount() {
// Get the html code of this Component here
// Something like:
// <div>
// <span>Child component</span>
// </div>
}
I've looked at this similar question:
React caching rendered components
But it doesn't go in depth on how one may obtain the html elements as a string

Answer 1

You either want to figure out a way to renderToString on the client or access the DOM directly, which returns the actual (not pretty) DOM node.
Here's an example using findDOMNode and outerHTML:
class Example extends React.Component {
componentDidMount() {
console.log(
ReactDOM.findDOMNode(this).outerHTML
);
}
render() {
return(
<div id="demo">
Ranch it up!
</div>
);
}
}
ReactDOM.render(<Example />, document.getElementById('View'));
<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>
<div id='View'></div>
I imagine this being not all that useful if you want to actually use this string somewhere (render it), so it's probably better to save store all the data (state) and go from there.

Answer 2

We ran into this same issue while working on our datagrid product http://www.reactdatagrid.com - We basically store the HTML tag as well as the attribute values in an object. Our render method looks something like this (not actual code):
render(){
this.reactElement = React.createElement(tagName, propertyBag, children);
return this.reactElement;
}
We have a fairly complex grid product and this works reasonably fast for us.