Render React components mixed with HTML from a container

Question

I have an APP that works well, but it has to embed within an "article", so it would be, in the simplicity:

<h1>...</h1>
<p>...</p>
<MyComponent key={1} data={data[0]} />
<p>...</p>
<MyComponent key={2} data={data[1]} />

The issues are:

1. There will be html tags and components mixed
2. My server is in PHP and the app has to be embed in a php file

I have tried sending the data from the rendered content to the render function (I know that there has to be some treatment in order to make it a component, I tried: - https://github.com/roman01la/html-to-react-components - https://www.npmjs.com/package/html-to-react

componentWillMount() {
        this.content = document.getElementById('root').innerHTML
    },
    render() {
    return (
          <div>
            {this.content}
          </div>
        )
    }

Is there a way that I can mix html tags (an article) with components inside of it and parse them to mount the components in that html?

Answer 1

If you want to render a html string inside a component you can do it.
this should work:

render() {
   return (
     <div dangerouslySetInnerHTML={{__html: this.content}} />
   )
}

https://facebook.github.io/react/docs/dom-elements.html#dangerouslysetinnerhtml