Bertindak balas AJAX
Hasil terjemahan：
Data komponen React boleh diperolehi melalui Ajax dalam kaedah componentDidMount Apabila data diperoleh daripada pelayan, data boleh disimpan dalam keadaan, dan kemudian UI boleh dipaparkan semula menggunakan kaedah this.setState. .
Bertindak balas AJAXsintaks
Apabila menggunakan pemuatan data tak segerak, gunakan componentWillUnmount untuk membatalkan permintaan tertunggak sebelum komponen dinyahlekapkan.
Bertindak balas AJAXcontoh
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>php.cn React 实例</title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var UserGist = React.createClass({
getInitialState: function() {
return {
username: '',
lastGistUrl: ''
};
},
componentDidMount: function() {
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: function() {
this.serverRequest.abort();
},
render: function() {
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')
);
</script>
</body>
</html>Run Instance »
Klik butang "Run Instance" untuk melihat instance dalam talian