标签：
组件的数据来源，通常是通过 Ajax 请求从服务器获取，可以使用 componentDidMount 方法设置 Ajax 请求，等到请求成功，再用 this.setState 方法重新渲染 UI
<!DOCTYPE html>
<html>
<head>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>
<script src="js/jquery.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var RepoList = React.createClass({
getInitialState: function () {
return {
loading: true,
error: null,
data: null
};
},
componentDidMount(){
this.props.promise.then(
value => this.setState({
loading:false,data:value
}),
error => this.setState({
loading:false,data:value
})
)
},
render:function () {
if(this.state.loading){
return <span>loading...</span>
}
else if(this.state.error !== null){
return <span>Error: {this.state.error.message}</span>;
}
else{
var repos = this.state.data.items;
var repoList = repos.map(function (repo,index) {
return (
<li key={index}><a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description}</li>
)
});
return (
<main>
<h1>Most Popular JavaScript Projects in Github</h1>
<ol>{repoList}</ol>
</main>
);
}
}
});
ReactDOM.render(
<RepoList promise={$.getJSON(‘https://api.github.com/search/repositories?q=javascript&sort=stars‘)}/>,
document.getElementById("example")
)
</script>
</body>
</html>
上面代码使用 jQuery 完成 Ajax 请求，这是为了便于说明。React 本身没有任何依赖，完全可以不用jQuery，而使用其他库。
我们甚至可以把一个Promise对象传入组件
标签：
原文地址：http://www.cnblogs.com/johnblog/p/5901384.html
