Render Komponenten mit HTML aus einem Behälter gemischt React

Question

Ich habe eine APP, die gut funktioniert, aber es hat in einem „Artikel“ einzubetten, es würde so sein, in der Einfachheit:

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

Die Probleme sind

1. Es werden hTML-Tags und Komponenten werden gemischt
2. Mein Server ist in PHP und die App hat in einer PHP-Datei zu einbetten

:

habe ich versucht, die Daten aus dem wiedergegebenen Inhalt an die Funktion machen das Senden (ich weiß, dass es einige Behandlung, um es zu machen, um eine Komponente zu sein hat, habe ich versucht: - 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> 
     ) 
    } 

Gibt es eine Möglichkeit, HTML-Tags (einen Artikel) mit Komponenten darin zu mischen und sie zu analysieren, um die Komponenten in diesem HTML-Code zu mounten?

Answer 1

Wenn Sie eine HTML-Zeichenfolge innerhalb einer Komponente rendern möchten, können Sie es tun.
dies sollte funktionieren:

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

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