Wie analysiere ich html zu React component?

9

Das ist mein Senario:
1. Antrag Antrag CMS (Content-Management-System) für den Inhalt der Seite.
2. CMS-Rückgabe "<div>Hi,<SpecialButton color="red">My Button</SpecialButton></div>"
3. Anwendung konsumieren den Inhalt, rendern entsprechende Komponente mit Daten im Attribut bereitgestellt.

Ich kann nicht herausfinden, wie man Schritt 3 auf Reactive Weise macht, jeder Rat wird geschätzt.

Danke @Glenn Reyes, hier ist eine Sandbox , um das Problem zu zeigen.

%Vor%

Hier ist eine Live-Demo von Vuejs. String "<div v-demo-widget></div>" könnte als Vuejs-Anweisung behandelt und gerendert werden. Quellcode .

    
Andy Chen 20.06.2017, 03:37
quelle

2 Antworten

3

Sie möchten wahrscheinlich tiefer in dangerouslySetInnerHTML schauen. Hier ist ein Beispiel, wie man HTML aus einer Zeichenfolge in einer React-Komponente rendert:

%Vor%

Vollständiges Beispiel hier: Ссылка

Lesen Sie mehr über dangerouslySetInnerHTML in den React-Dokumenten hier: Ссылка

    
glennreyes 20.06.2017 08:38
quelle
1

Sie können versuchen, ReactDOMserver zu verwenden, um <MyReactComponent /> in% co_de zu rendern % auf Ihrem Server und geben Sie sie dann an den Client weiter, wo Sie alle empfangenen html über einfügen können html .

    
GProst 20.06.2017 06:40
quelle