Convert react JSX object to HTML

Use renderToStaticMarkup method - it produces HTML strings that we can transfer to the wire quickly:

const htmlString = ReactDOMServer.renderToStaticMarkup(
      <div ...
);

redux code:

Here is the full code that I had to use in my react/redux application.

import React from 'react';
import ReactDOMServer from 'react-dom/server';
import {Provider} from 'react-redux';

...

class ParentComponent extends React.Component {

    ...

    getHtml(config) {
        const {classes, children} = config
        return ReactDOMServer.renderToStaticMarkup(
            <Provider store={this.context.store}>
                <ChildComponent classes={classes}>{children}</ChildComponent>
            </Provider>
        )
    }
}

ParentComponent.contextTypes = { store: React.PropTypes.object };

Notes:

  • Use ReactDOMServer.renderToStaticMarkup() to get the HTML code
  • Specify ParentComponent.contextTypes to make this.context.store available
  • Need to wrap the ChildComponent in a Provider so it has access to the redux store.