Javascript 同构React.js&；iso http_Javascript_Reactjs

Javascript 同构React.js&；iso http

javascript reactjs

Javascript 同构React.js&；iso http,javascript,reactjs,Javascript,Reactjs,我正在构建一个react web应用程序，我想同时呈现服务器端和客户端。我一直在工作，但我曾经对我的内容服务器进行查询。我的目标是让应用程序在服务器端直接查询content server并将内容呈现为HTML；并且在客户端对应用程序进行正常的AJAX内容请求时这是我正在使用的代码。它在浏览器上非常有效，但服务器端渲染不包含数据；我推测是因为服务器端呈现程序在编译HTML并发送之前没有等待异步http调用返回： componentDidMount: function() { var id =

我正在构建一个react web应用程序，我想同时呈现服务器端和客户端。我一直在工作，但我曾经对我的内容服务器进行查询。我的目标是让应用程序在服务器端直接查询content server并将内容呈现为HTML；并且在客户端对应用程序进行正常的AJAX内容请求时

这是我正在使用的代码。它在浏览器上非常有效，但服务器端渲染不包含数据；我推测是因为服务器端呈现程序在编译HTML并发送之前没有等待异步http调用返回：

componentDidMount: function() {
  var id = this.getParams().id;
  var classThis = this;

  request
  .get("http://content.example.com/things/" + id)
  .end(function(response) {
    response.body = JSON.parse(response.text);
    if (response.ok) {
      classThis.setState({ data: response.body });
    } else {
      classThis.setState({ data: null });
    }
  });
}

我知道这都是全新的东西；但是，有没有一种已知的方法可以解决这个问题，以便服务器端渲染器在发送之前等待某些异步调用完成？

我已经设法解决了这个问题

我像这样拉出了异步函数，这样我就可以从

componentDidMount

和

ReactAsync

使用的异步

getinitialstatesync

函数调用它：

mixins: [ ReactAsync.Mixin ],

getInitialStateAsync: function(callback) {
  this.getContent(function(state) {
    callback(null, state)
  }.bind(this))
},

componentDidMount: function() {
  this.getContent(function(state) {
    this.setState(state);
  }.bind(this));
},

getContent: function(callback) {
  var id = this.getParams().id;
  request
    .get("http://content.example.com/things/" + id)
    .end(function(response) {
      response.body = JSON.parse(response.text);
      if (response.ok) {
        callback({ error: {}, post: response.body })
      } else {
        callback({ post: {}, error: response.body });
      }
    });
}

然后在我的

server.jsx

中，我使用异步函数进行渲染：

ReactAsync.renderToStringAsync(<Handler />, function(err, markup) {
  var html   = React.renderToStaticMarkup(<Html title={title} markup={markup} />);
  res.send('<!DOCTYPE html>' + html);
});

ReactAsync.renderToStringAsync（，函数（错误，标记）{
var html=React.renderToStaticMarkup（）；
res.send（“”+html）；
});

显然，这里存在巨大的错误可能性（如果服务器不存在，整个页面将无法呈现），但这似乎是正确方法的开始

componentDidMount

从未在服务器上运行。您必须将手头的数据呈现为字符串（而不是请求数据）。是否有“最佳实践”方法在服务器和浏览器上运行不同的代码？我可以提取数据检索函数，然后从浏览器上的

componentDidMount

和服务器上的

getInitialState