Question

我目前正在开发一个在客户端和服务器之间使用一些共享JS的项目。技术堆栈包括Node v6，Webpack，React等。

有一个“共享”目录，服务器和客户端需要一个名为 rules.js 的文件。在服务器端发生的第一次渲染中， rules.js 中声明的规则变量设置为来自DB的值（我已经完成了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;

你知道可能出现什么问题吗？我应该选择不同的方法吗？

Answer 1

虽然客户端和服务器都可以共享该文件，但该类的实例却不是。因此，您在服务器上执行的任何操作都不会在客户端上持久存在，反之亦然。

有一个想法是＆＃34;脱水＆＃34;和＆＃34;补水＆＃34;你的州。

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

<强> yourTemplateFile

...
<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);

Checkout this SO answer utilizing an analogy from Back to the Future to explain dehydrating/rehydrating

Isomorphic JS - 变量在客户端不可用

1 个答案: