在使用 swig 和 Koa 进行服务器端渲染时将道具传输到客户端

Question

这是我的 server.js

router.get('/react/:regioncode', function*(next) {
  var response =
    yield fnGetOffers(this.params.regioncode);
  var JsonResponse = JSON.parse(response);
  var offerHtml = ReactDOM.renderToString(ReactApp({
    offerAPI: JsonResponse
  }));
  this.body =
    yield render('index', {
      reactoffers: offerHtml,
      offerAPI : JsonResponse
    });
});

服务器端呈现正常，但要附加事件处理程序，我也需要在客户端加载数据。我想在客户端使用相同的 JSON 数据，为此我这样做 :

var mountNode = document.getElementById('react-content');
ReactDOM.render( < ReactApp offerAPI = {
      offerAPI
    }
    />, mountnode);

问题是我无法在我的客户端 js 中获取 offerAPI 数据，而且我的事件处理程序也没有附加。

Answer 1

通常在对 React（或任何其他依赖服务器端渲染的 JavaScript）进行初始数据处理时，您会将内容放在附加到 window 对象的变量中。

<html>
<body>
<script>
    window.offerAPI = {{{ offerAPI }}};
</script>
</body>
</html>

React 可以这样拾取：

var mountNode = document.getElementById('react-content');
ReactDOM.render( < ReactApp offerAPI = {
      window.offerAPI
    }
    />, mountnode);

这当然会在获取数据后被清除，以免它在 DOM 中无用地乱七八糟。

在使用 swig 和 Koa 进行服务器端渲染时将道具传输到客户端

Transferring props to client side while doing server side rendering using swig and Koa

node.js

reactjs

koa