我试图通过将该状态字符串化并将其存储在全局变量中来将初始状态从服务器传递到客户端。下面是我正在做的简化版本。
// home.tsx
res.render('home', { appState: {script: '<script></script>'} });
// home.pug
doctype html
html
head
script.
window.__initialState__ = !{JSON.stringify(appState)};
body
#root
可悲的是,结果看起来像这样
<script>window.__initialState__ = {"script":"<script></script>
这是无效的Javascript。我的结局是将服务器的appState对象分配给window .__ initialState__。
代码的第一部分非常令人困惑。但是,作为一般规则,您应始终将从服务器传递到客户端的任何HTML编码为字符串。
因此,您需要更改生成以下行的服务器代码部分:
let scriptObject = {script: '<script></script>'};
对此(假设你正在使用pug和node.js):
var htmlencode = require('htmlencode');
let scriptObject = {script: htmlencode.htmlEncode('<script></script>')};