设置危险地设置innerHtml时，如何从ReactJS中的html字符串呈现react组件？

Question

I am trying to load a component dynamically from html string. for example: I am having a html string like following which is from json.

 <div>This is some html content having a component of <Combobox params="option1,option2,option3"/></div>

here <Combobox params="option1,option2,option3"/> is a React component which i need to render as a HTML combobox with options 1,2 and 3 along with the texts. So, is there any way to do this kind of things in React.

Answer 1

The entire JSX can be parsed to HTML using renderToString method.

import ReactDOMServer from 'react-dom/server';   

render() {
  const html = ReactDOMServer.renderToString(<div><Combobox /></div>);
  return (
    <div dangerouslySetInnerHTML={html}></div>
  );
}

Answer 2

To build on vijayst's answer , if you're using redux/react-redux, and this happens to be a "connected" component, you'll need to import and pass the store along again.

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

render() {
  const html = ReactDOMServer.renderToString(<Provider store={store}><Combobox /></Provider>);
  return <div dangerouslySetInnerHTML={html}></div>;
}