在使用 Reactjs 的同构应用程序中,您需要将在服务器上呈现的相同初始状态向下传递给客户端(然后客户端将使用事件绑定(bind)等“补充”应用程序)。
我见过两种传递初始状态的方法——
为窗口设置一个全局变量:
<script>
window.initialState = {{JSON.stringify(initialState)}} ;
</script>
或者将其作为 JSON 对象传递:
<script id="initial-state" type="application/json"> {{JSON.stringify(initialState)}}</script>
两者都可以从应用程序的任何位置轻松检索。使用一个比另一个有什么优势吗?
最佳答案
后者避免了全局变量,前者避免了 DOM 查找。我会选择前者,只是因为它需要的代码更少。
一个问题是如果你有</script
在您的 JSON 中,它可能允许注入(inject)或意外错误。为防止这种情况,您可以替换 <
与 \u003c
.
<script>
window.initialState = {{
JSON.stringify(initialState).replace(/</g, '\\u003c')
}};
</script>
关于javascript - JSON 对象与窗口变量,用于使用 reactjs 传递服务器端呈现的初始状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27669648/