react系列（7）引入jquery

淡淡的烟草味﹌ 2021-09-14 10:24 523阅读 0赞

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。

发表评论取消回复

表情：

评论列表（有 0 条评论，523人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery引入----练习

jQuery引入----练习 html <!DOCTYPE html> <html> <head> <title

忘是亡心i/ 2024年03月22日 11:09/ 0 赞/ 79 阅读

相关 umijs中引入jquery

移动端H5中，仍旧可以使用jquery的scroll监听滚动，这个监听没有明显的延迟 yarn add jquery --save import $ f

末蓝、/ 2023年03月05日 05:27/ 0 赞/ 30 阅读

相关 react引入less

react引入less 如果使用`sass`的话直接 > yarn add sass-loader node-sass 使用yarn安装有可能安装不成功，不知道为啥这个

太过爱你忘了你带给我的痛/ 2022年11月15日 03:41/ 0 赞/ 251 阅读

相关 React cdn引入

<script src="https://cdn.bootcdn.net/ajax/libs/react/16.13.1/umd/react.production.mi

矫情吗；*/ 2022年10月11日 12:10/ 0 赞/ 244 阅读

相关 seaJS无法引入JQuery

这个问题对新手来说还是挺麻烦的。 seaJS引入JQuery之后，却无法正常使用，打印$，也是null。确认代码没有问题后，那么问题就只能出在seaJS与JQuer

一时失言乱红尘/ 2022年07月16日 13:43/ 0 赞/ 480 阅读

相关 vue中引入jquery

1、在项目中安装jquery。 npm install jquery --save-dev ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5

不念不忘少年蓝@/ 2022年01月23日 00:21/ 0 赞/ 470 阅读

相关 webpack全面引入jQuery

方法一：使用expose-loader 链接地址 //首先安装expose-loader npm install expose-loader --sav

忘是亡心i/ 2021年12月11日 03:09/ 0 赞/ 436 阅读

相关 layui引入jQuery

//第一种：主动加载jquery模块 layui.use(['jquery', 'layer'], function(){ var $ = lay

谁借莪１个温暖的怀抱￠/ 2021年09月23日 08:52/ 0 赞/ 677 阅读

相关 react系列（7）引入jquery

jquery在webpack中的引用写法： var $ = require('jquery'); 若想发生网络请求，在组件刚完成挂载componentDidMoun

淡淡的烟草味﹌/ 2021年09月14日 10:24/ 0 赞/ 524 阅读

相关 react 引入本地图片

react中src直接写本地路径图片不会显示 1、require src={require('本地图片路径')} 2、i

柔光的暖阳◎/ 2021年07月24日 11:37/ 0 赞/ 558 阅读