Wie werden Komponenten gerendert, wenn sich die Komponenten-Tags in einer Zeichenfolge befinden?

Question

Ich bekomme eine Zeichenfolge aus einer Rest-API, die Komponenten-Tags enthält. Es folgt Beispiel string: -

let stringFromAPI = "Lorem ipsum dolor sit amet, <TooltipComponent>consectetur</TooltipComponent> adipiscing elit. Non enim, <ButtonComponent>si omnia</ButtonComponent> non sequebatur, idcirco non erat ortus illinc. Re mihi non aeque satisfacit, et quidem locis pluribus. Ita relinquet duas, de quibus etiam atque etiam consideret. Ad <TooltipComponent>corpus</TooltipComponent> diceres pertinere-, sed ea, quae dixi, ad corpusne refers?" 

Wenn ich es bin Rendering-Komponenten als Text angezeigt werden statt Rendering. Wie kann ich Komponenten in String gerendert machen?

render() { 
     return (<div>{stringFromAPI}</div> 
    ) 
} 

dangerouslySetInnerHTML = {{__ html: rawMarkup}} rendert nur HTML-Elemente, die nicht Komponenten reagieren.

Answer 1

Ich nehme an, Sie haben Zugriff auf Backend-Quellcode. In diesem Fall müssen Sie Komponenten zuerst als Zeichenfolge verketten, dann verketten und an das DOM im Frontend anhängen.

Verwenden Sie ReactDOMServer.renderToString, um React-Komponente in Zeichenfolge zu übersetzen. Diese JSFiddle kann Ihnen eine Idee geben.