reagire AJAX

Reagire dati dei componenti possono essere ottenuti con il metodo componentDidMount Ajax, mentre l'accesso alla banca dati dal server in grado di memorizzare i dati nello stato, e poi ri-rendering metodo this.setState UI.

Quando si utilizzano asincrona dei dati di carico, scarico di assemblaggio prima dell'uso componentWillUnmount per annullare le richieste in sospeso.

L'esempio seguente mostra Get ultima essenza Github utenti Share Descrizione:

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" />,
  mountNode
);

Prova »

Il codice precedente utilizza jQuery Ajax richiesta è stata completata.