我是 ReactJS 的新手并试图理解它。现在，我正在加载渲染所需的信息。但由于它是异步的，组件在信息传递给它之前呈现自身。
var info;
function getInfo() {
//this will come from backend REST with Backbone which takes a bit
}
var InfoPage = React.createClass({
render: function() {
getInfo()
return (
<div>info: {info}</div>
);
}
});
现在 div 不会显示信息值，因为它还没有在渲染中设置。那么我怎样才能让渲染等待信息呢？或者应该如何解决？
实际的 React.renderComponent 是从顶层调用的，它会触发所有子组件，所以我认为我不能强制进行新的渲染（我不应该这样做？）。
您需要执行以下操作：
var InfoPage = React.createClass({
getInitialState: function() {
return {info: "loading ... "};
},
componentDidMount: function() {
this.getInfo();
},
render: function() {
return (
<div>info: {this.state.info}</div>
);
},
getInfo:function(){
$.ajax({ url:"restapi/getInfo/whatever", .... }).success(function(res){
this.setState({info:res});
}.bind(this));
}
});
ComponentDidMount 生命周期方法根据文档，componentDidMount您应该使用组件挂钩来执行 ajax 请求：
http://facebook.github.io/react/docs/component-specs.html#mounting-componentdidmount
组件DidMount
渲染发生后立即调用... 如果您想与其他 JavaScript 框架集成，使用 setTimeout 或 setInterval 设置计时器，或发送 AJAX 请求，请在此方法中执行这些操作。
使用您的示例，代码可能如下所示：
var InfoPage = React.createClass({
getInitialState: function () {
return { info: {} };
},
componentDidMount: function () {
$.ajax({
url: '/info.json',
dataType: 'json',
success: function(data) {
this.setState({info: data});
}.bind(this)
});
},
render: function() {
return (
<div>info: {this.state.info}</div>
);
}
});
getInitialState上面，我们使用的getInitialState方法是返回一个空info对象。这允许我们的组件进行渲染，同时我们等待服务器返回数据。
一旦componentDidMount执行，它将this.setState用于替换空info和服务器数据并重新render组件。