Server-Rendering wird ausgeführt, HTML wird zum Browser gesendet

Question

Ich versuche, eine einfache App einzurichten, in der ich das Rendering von React-Servern verwende.

Reagieren 0.14.8, Express 4.13.4.

const React = require('react'); 
const ReactDOMServer = require('react-dom/server'); 
const express = require('express'); 
const exphbs = require('express-handlebars'); 

const myApp = React.createFactory(require('./app/components/app.jsx')); 

// ...express/handlebars setup stuff here 

app.get('/', function(req, res) { 
    const html = ReactDOMServer.renderToString(myApp()); 
    res.render('home', { content: html }); 
}); 

Meine html Variable enthält das Markup, jedoch ist es entkommen und der Browser zeigt den HTML-Code.

Ich weiß über dangerouslySetInnerHTML(), aber ich möchte wirklich nicht verwenden müssen. Es heißt aus einem bestimmten Grund.

So bin ich links denken, dass es etwas geben muss, dass ich hier vermisse. Da das Server-Rendering ein ziemlich großes Feature von React ist und dangerouslySetInnerHTML() nicht empfohlen wird, haben die beiden nicht das Gefühl, dass sie zusammen verwendet werden sollten.

Was fehlt mir ..?

Kann jemand ein wirklich grundlegendes, bloßes Beispiel für React Server Rendering geben ..?

Answer 1

Ich denke, ich war verwirrt (es passiert) ... Der HTML-Code von renderToString() war eigentlich in Ordnung, es war Lenker, die HTML entkam.

In meiner Handle-Template-Datei habe ich {{content}} geändert in {{{content}}} wie in der Dokumentation: http://handlebarsjs.com/ (HTML Escaping).

Der Browser rendert den HTML-Code jetzt als HTML, anstatt den HTML-Code anzuzeigen.

Ich fühle, dass ich eine Entschuldigung der ReactDOMServer.renderToString() Methode schulde.

Es tut mir leid!

Answer 2

Sie haben Recht, die einzige Möglichkeit, innerHtml beim Rendern zu injizieren, ist leider mit der schrecklich benannten dangerouslySetInnerHTML() Funktion. Im Grunde fordert es dich auf, darüber nachzudenken, bevor du es tust. Ein schönes Beispiel ist hier geschrieben: https://camjackson.net/post/server-side-rendering-with-react