Wie HTML zu React Komponente zu analysieren?

Question

Das ist mein Senario:
1. Antrag Antrag CMS (Content-Management-System) für den Inhalt der Seite.
2. CMS Rückkehr "<div>Hi,<SpecialButton color="red">My Button</SpecialButton></div>"
3. Anwendung verbrauchen die Inhalte, machen mit Daten entsprechende Komponente in Attribut versehen.

Ich kann nicht herausfinden, wie man Schritt 3 in Reactive Weise tut, wird jeder möglicher Rat geschätzt.

Dank @Glenn Reyes, hier ist ein Sandbox das Problem zu zeigen.

import React from 'react'; 
import { render } from 'react-dom'; 

const SpecialButton = ({ children, color }) => (
    <button style={{color}}>{children}</button> 
); 

const htmlFromCMS = ` 
<div>Hi, 
    <SpecialButton color="red">My Button</SpecialButton> 
</div>`; 

const App =() => (
    <div dangerouslySetInnerHTML={{__html: htmlFromCMS}}> 
    </div> 
); 

// expect to be same as 
// const App =() => (
// <div>Hi, 
//  <SpecialButton color="red">My Button</SpecialButton> 
// </div> 
//); 

render(<App />, document.getElementById('root')); 

Here is a live demo von Vuejs gemacht. Die Zeichenfolge "<div v-demo-widget></div>" könnte als Vuejs-Anweisung behandelt und gerendert werden. Source Code.

Answer 1

können Sie versuchen, den Einsatz ReactDOMserver<MyReactComponent /> in html auf Ihrem Server zu machen und es dann an den Client übergeben, wo Sie alle html über dangerouslySetInnerHTML empfangen einfügen können.

Answer 2

Sie wollen wahrscheinlich tiefer in dangerouslySetInnerHTML suchen. Hier ist ein Beispiel, wie HTML zu rendern, von einem String in einem React Komponente:

import React from 'react'; 
import { render } from 'react-dom'; 

const htmlString = '<h1>Hello World! </h1>'; 

const App =() => (
    <div dangerouslySetInnerHTML={{ __html: htmlString }} /> 
); 

render(<App />, document.getElementById('root')); 

Voll Beispiel hier: https://codesandbox.io/s/xv40xXQzE

Lesen Sie mehr über dangerouslySetInnerHTML in den React docs hier: https://facebook.github.io/react/docs/dom-elements.html#dangerouslysetinnerhtml