AJAX reagieren


  Übersetzungsergebnisse：

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 reagierenSyntax

Wenn Sie das asynchrone Laden von Daten verwenden, verwenden Sie „componentWillUnmount“, um ausstehende Anforderungen abzubrechen, bevor die Bereitstellung der Komponente aufgehoben wird.

AJAX reagierenBeispiel

<!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

Beliebte Empfehlungen

Heim

Videos

Fragen und Antworten

einreichen