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.