Réagir à AJAX
Les données du composant React peuvent être obtenues via Ajax dans la méthode composantDidMount Lorsque la base de données est obtenue à partir du serveur, les données peuvent être stockées dans l'état, puis l'interface utilisateur peut être restituée à l'aide du fichier React. méthode this.setState.
Lorsque vous utilisez le chargement asynchrone de données, utilisez composantWillUnmount pour annuler les demandes en attente avant que le composant ne soit démonté.
L'exemple suivant montre l'obtention de la dernière description de partage essentiel d'un utilisateur 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>Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Le code ci-dessus utilise jQuery pour terminer la requête Ajax.
