react系列(7)引入jquery
阿新 • • 發佈:2018-12-31
jquery在webpack中的引用寫法:
var $ = require('jquery');
若想發生網路請求,在元件剛完成掛載componentDidMount的時候,只要遵照jquery的ajax標準寫法標準即可:
var AjaxTest = React.createClass({ getInitialState:function(){ return { name : "null", gisurl:"null" }; }, componentDidMount:function(){ var target = this; //寫法一 this.serverRequest = $.ajax({ url: this.props.source, data: "", type: 'GET', timeout: 30000, error: function(response, state) { console.log(response); }, success: function(response, state) { var lastGist = response[0]; target.setState({ name: lastGist.owner.login, gisurl: lastGist.html_url }); } }); //寫法二 // this.serverRequest = $.get(this.props.source, function (result) { // var lastGist = result[0]; // this.setState({ // name: lastGist.owner.login, // gisurl: lastGist.html_url // }); // }.bind(this)); }, componentWillUnmount: function() { this.serverRequest.abort(); //在元件解除安裝前取消請求 }, render:function(){ return ( <div> <h1>"name:"+{this.state.name}</h1> <h1>"gisurl:"+{this.state.gisurl}</h1> </div> ); } }); ReactDOM.render( <AjaxTest source="https://api.github.com/users/octocat/gists" />, document.getElementById("example") );
在元件解除安裝前如請求仍未結束,一定要取消請求。
(貼士)在react中實現網路請求一般不建議使用這種方式,可以通過引入專門實現網路請求的依賴包:axios
$ npm install axios -S
其用法可參照axios api。