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