Bertindak balas AJAX
Data komponen React boleh diperolehi melalui Ajax dalam kaedah componentDidMount Apabila pangkalan data diperoleh daripada pelayan, data boleh disimpan dalam keadaan, dan kemudian UI boleh dipaparkan semula menggunakan. kaedah ini.setState.
Apabila menggunakan pemuatan data tak segerak, gunakan componentWillUnmount untuk membatalkan permintaan tertunggak sebelum komponen dinyahlekapkan.
Contoh berikut menunjukkan mendapatkan perihalan perkongsian intipati terkini pengguna Github:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>php中文网 React 实例</title>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react.js"></script>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.js"></script>
<script src="http://static.php.cn/assets/react/browser.min.js"></script>
<script src="http://apps.bdimg.com/libs/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 "Jalankan Instance" untuk melihat contoh dalam talian
Kod di atas menggunakan jQuery untuk melengkapkan permintaan Ajax.
