我目前正在开发一个在客户端和服务器之间使用一些共享 JS 的项目。技术堆栈包括 Node v6、Webpack、React 等。
有一个“共享”目录,服务器和客户端需要一个名为rules.js的文件。在服务器端发生的第一次渲染中,在 rules.js 中声明的规则变量设置为来自数据库的值(我已经完成了 console.log 来验证它是否确实填充了数据)。
然后在客户端,某些组件可能需要此 rules.js 文件并获取规则变量。但是,当我 console.log 变量时,它是空的。
规则文件看起来与此类似:
// shared/rules.js
let rules;
// This is called on server to set the value
exports.setData = function(data) {
rules = data;
}
exports.rules = rules;
您知道可能出了什么问题吗?我应该选择不同的方法吗?
最佳答案
虽然该文件可以由客户端和服务器共享,但该类的实例却不能。因此,您在服务器上对其执行的任何操作都不会保留在客户端上,反之亦然。
一个可用的想法是“脱水”和“补水”您的状态。
server.js
// implemented in server to dehydrate your state
import rules from '../shared/rules';
let dehydratedRules = JSON.stringify(rules.rules);
let html = renderToString(<App/>);
// now in your render call
res.render('yourTemplateFile', {html, dehydratedRules});
你的模板文件
...
<script type="text/javascript">var __RULES__ = {{dehydratedRules}};
...
client.js
// implemented in client to rehydrate your state
import rules from '../shared/rules';
let parsedRules = JSON.parse(__RULES__);
delete window.__RULES__;
// set the rehydrated data back in the class
rules.setData(parsedRules);
关于javascript - 同构 JS - 变量在客户端不可用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40278145/