Die Daten der React-Komponente können über Ajax in der Methode „componentDidMount“ abgerufen werden. Wenn die Daten vom Server abgerufen werden, können die Daten im Status gespeichert und die Benutzeroberfläche anschließend mit der Methode „this.setState“ neu gerendert werden .
AJAX reagieren Syntax
Wenn Sie das asynchrone Laden von Daten verwenden, verwenden Sie „componentWillUnmount“, um ausstehende Anforderungen abzubrechen, bevor die Bereitstellung der Komponente aufgehoben wird.
AJAX reagieren Beispiel
<!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>Instanz ausführen »
Klicken Sie auf die Schaltfläche „Instanz ausführen“, um die Online-Instanz anzuzeigen