Convert react JSX object to HTML

Question

I have a react application that generates HTML output based on some configuration. Like this:

export const getHtml = (config) => {   const {classes, children} = config   return (<div className={classes.join(' ')}>{children}</div>); } 

Inside the react app I can easily display the resulting DOM objects, but I want to save the HTML code to DB, to display it on a different page (without loading react/parsing the config again)

I could not find a way to convert the JSX object to plain HTML...

Answer 1

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

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

Answer 2

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.