Question

我试图在我使用React服务器渲染的地方设置一个简单的应用程序。

React 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 });
});

我的html变量包含标记，但是它已被转义，浏览器会显示HTML。

我知道dangerouslySetInnerHTML()，但我真的不想使用它。它出于某种原因而得名。

所以我一直认为我必须在这里找到一些东西。由于服务器渲染是React的一个重要特征，并且不鼓励使用dangerouslySetInnerHTML()，因此两者并不真的觉得它们应该一起使用。

我错过了什么..？

有人可以提供React服务器渲染的一个非常基本的，简单的例子吗？

Answer 1

你是对的，不幸的是，在渲染时注入innerHtml的唯一方法是使用那个可怕的dangerouslySetInnerHTML()函数。基本上它要求你在做之前真正考虑它。这里写出了一个很好的例子：https://camjackson.net/post/server-side-rendering-with-react

Answer 2

我觉得我感到很困惑（它发生了）......从renderToString()返回的HTML实际上是正常的，它是逃脱HTML的把手。

在我的Handlebars模板文件中，我根据文档http://handlebarsjs.com/（HTML Escaping）将{{content}}更改为{{{content}}}。

浏览器现在将HTML呈现为HTML而不是显示HTML。

我觉得我对ReactDOMServer.renderToString()方法道歉了。

对不起！

反应服务器渲染，将HTML传送到浏览器

2 个答案: