这里使用的是jq的ajax。请求方法没有什么变化。获取值的方式最好用Es6,会比较方便。代码如下:
class UserGist extends React.Component {
constructor(props) {
super(props);
this.state = {username: '', lastGistUrl: ''};
}
componentDidMount() {
this.serverRequest = $.get(this.props.source, (result)=> {
var lastGist = result[0];
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
});
} );
// 如果不用箭头函数,就需要用bind来解决this的指向问题
// this.serverRequest = $.get(this.props.source, function (result) {
// var lastGist = result[0];
// this.setState({
// username: lastGist.owner.login,
// lastGistUrl: lastGist.html_url
// });
// }.bind(this));
}
componentWillUnmount() {
// 停止ajax
this.serverRequest.abort();
}
render() {
return (
<div>
{this.state.username} 用户最新的 Gist 共享地址:
<a href={this.state.lastGistUrl}>{this.state.lastGistUrl}</a>
</div>
);
}
}
ReactDOM.render(
<UserGist source="https://api.github.com/users/octocat/gists" />,
document.getElementById('example')
);