您的位置：首页 > Web前端 > React

React ajax

2016-03-21 10:49 621 查看

来源

通过

AJAX

加载初始数据，引入

jQuery

。

在

componentDidMount

时加载数据。当加载成功，将数据存储在

state

中，触发

render

来更新你的

UI

。

当执行同步请求的响应时，在更新

state

前，一定要先通过

this.isMounted()

来检测组件的状态是否还是

mounted

。

<head>
<meta charset="UTF-8">
<title>使用异步请求</title>
<script src="../lib/react.js"></script>
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
</head>

var UserGist = React.createClass({
getInitialState: function () {
return {
username: '',
lastGistUrl: ''
};
},

componentDidMount: function () {
$.get(this.props.source, function (result) {
var lastGist = result[0];
if (this.isMounted()) {
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
});
}
}.bind(this));
},

render: function () {
/*function z(x, ...y) {
console.log(x, y);
}

z(1, 2, 3, 4, 5);*/
return (
<div>
{this.state.username}'s last gist is
<a href={this.state.lastGistUrl}> here</a>.
</div>
);
}
});

React.render(
<UserGist source="https://api.github.com/users/octocat/gists"/>,
document.body
);

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航