Question

这是我的server.js

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

事情是我无法在我的客户端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进行服务器端渲染时将道具转移到客户端

1 个答案: