首页 > 代码库 > 十一.Ajax
十一.Ajax
组件的数据来源,通常是通过 Ajax 请求从服务器获取,可以使用 componentDidMount
方法设置 Ajax 请求,等到请求成功,再用 this.setState
方法重新渲染 UI
<!DOCTYPE html>
<html>
<head>
<script src=http://www.mamicode.com/"js/react.js"></script>
<script src=http://www.mamicode.com/"js/react-dom.js"></script>
<script src=http://www.mamicode.com/"js/browser.min.js"></script>
<script src=http://www.mamicode.com/"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 =http://www.mamicode.com/> 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=http://www.mamicode.com/{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对象传入组件
十一.Ajax
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。