【原】react中如何使用jquery插件
react的思想是虚拟dom,提倡最好较少dom的操作,可是我们在写网页的时候,有些复杂的交互还是离不开jquery插件的。而且当你把jquery直接拿来用的时候,你会发觉会报错,要么是找不到那个插件,要么就是没有报错,但是就是不能用。尤其是使用webpack打包后,如果将插件一起打包,那可能会出错。
那怎么过办呢?提供以下的解决方法
方法1:
在github下搜索react-插件名,比如: react-swiper,如果你可以搜到结果,那么就可以直接使用react的插件了,而无需再依赖jquery插件。
方法2:
将插件引入到页面的尾部,跟平时使用插件的方式一样。

这是我webpack引入jquery的代码

但是如果你的react项目中要使用jquery,插件也要依赖于jquery。用webpack打包的话,相当于引入了jquery两次。这个做法的缺点主要是在这里
方法3
就是稍微修改一下插件的源码,把方法暴露出来即可。
比如我要修改一个上传图片的插件 ajaxFileUpload:
原来插件是这样的,只截取头部和尾部的位置
修改前头部:

修改前尾部:

稍作修改,其实就是形成一个闭包,把它暴露出来即可
修改后的头部

修改后的尾部

头部和尾部都知识修改了箭头所指的部分,前面的参数,比如UP你可以随便传。这样我们原来的插件就修改好了。接下来说一下调用方法。
修改后插件的调用
1、把插件引入到你需要使用到的地方。注意名字就是你下面要调用的名字。

2、按照原来的使用方法即可

使用注意:正常的使用ajaxFileUpload的方法是$.ajaxFileUpload,这里只是把前面的 $ 号变成了你引入的名字而已,其他的使用方法是一样的。比如你引入的时定义的字段是
aa,那么调用就是aa.ajaxFileUpload 总之就一句话,只是调用时的名字换了,其他的用法都是跟原来的插件一模一样的。
【原】react中如何使用jquery插件的更多相关文章
- pasteimg浏览器中粘贴图片jQuery插件
pasteimg是一款可以在浏览器中实现图片粘贴的jQuery插件,兼容Chrome.Firefox.IE11以及其他使用这些内核的浏览器,比如,国内著名的360浏览器. pasteimg可以识别浏览 ...
- DWZ(JUI) 教程 中如何整合第三方jQuery插件
Query插件一般是$(document).ready()中初始化 $(document).ready(function(){ // 文档就绪,初始化jQuery插件| }); // 或者或缩写形 ...
- jquery插件封装成seajs模块
jquery直接在html中引入. jquery插件修改为: define(function (require, exports, moudles) { return function (jquery ...
- jQuery插件实践之轮播练习(二)
所有文章搬运自我的个人主页:sheilasun.me 上一篇中学习了jQuery插件的写法,这篇该着手实现啦.首先明确一下轮播要具备哪些功能: 可以点击"向后"按钮向后翻页 可以点 ...
- 使用requireJS的shim參数,完毕jquery插件的载入
没有requireJS框架之前,假设我们想使用jquery框架,会在HTML页面中通过<script>标签载入.这个时候jquery框架生成全局变量$和jQuery等全局变量.假设项目中引 ...
- react 或 vue 中引用 jQuery 插件
前言 今天与遇到一个令人抓狂的事情, 因为项目中有个交互太过于复杂而且冷门, 没有人封装类似react-swiper那种的移植过来的插件 只有现成的jQuery插件. 而时间并不宽裕,自己重写成rea ...
- 在react里面使用jquery插件
在react里面使用jquery插件 背景: 虽然现在react,vue等框架开启了前端开发的新篇章, 但对于一些比较复杂的页面,比如想在项目里面生成 组织架构图,人员汇报关系等还是需要用到之前的 j ...
- 在Web工程中引入Jquery插件报错解决方案
在学习Jquery插件的时候,遇到一个问题就是新建web工程后在WebRoot下引入Jquery插件的时候报错,不知道为什么好纠结,但是项目能正常运行,后来找到解决方案,在这里给大家分享一下. 解决方 ...
- jQuery插件中的this指的是什么
在jQuery插件的范围里, this关键字代表了这个插件将要执行的jQuery对象, 但是在其他包含callback的jQuery函数中,this关键字代表了原生的DOM元素.这常常会导致开发者误将 ...
随机推荐
- java文件cmd运行出现中文乱码
今天刚开始学java,使用cmd命令执行java文件的时候,发现中文打出来是一串乱码. 于是就百度了一下,发现一个行之有效的方法. 首先使用命令:javac -encoding utf-8 Hello ...
- 品牌OEM信息导入工具(实测支持Win10)
OEM修改,定制专属LOGO. 免费下载:http://yunpan.cn/cmZuTYWLIGX6Q 访问密码 2da7 备用通道: http://pan.baidu.com ...
- Bete冲刺第七阶段
Bete冲刺第七阶段 今日工作: web: 新增通知处理接口 ios: 重写登录逻辑,添加创建行程填写.注册 POP界面 目前所遇问题: web: web目前进展顺利,暂时还没有遇到编码的问题. iO ...
- Mybatis学习--spring和Mybatis整合
简介 在前面写测试代码的时候,不管是基于原始dao还是Mapper接口开发都有许多的重复代码,将spring和mybatis整合可以减少这个重复代码,通过spring的模板方法模式,将这些重复的代码进 ...
- MyBatis学习总结
1.引入jar包到lib目录下:只需要mybatis的一个mybatis.jar及数据库的jar包. 2.在src下新建xml配置文件,即上图中的conf.xml <?xml version=& ...
- IntelliJ_13_配置tomcat
一.下载tomcat7并解压 http://tomcat.apache.org/download-70.cgi http://apache.fayea.com/tomcat/tomcat-7/v7.0 ...
- quartz介绍
Quartz 是一个开源的作业调度框架,它完全由 Java 写成,并设计用于 J2SE 和 J2EE 应用中.它提供了巨大的灵活性而不牺牲简单性.你能够用它来为执行一个作业而创建简单的或复杂的调度.本 ...
- SurfaceView, TextureView, SurfaceTexture等的区别
SurfaceView, GLSurfaceView, SurfaceTexture以及TextureView是Android当中名字比较绕,关系又比较密切的几个类.本文基于Android 5.0(L ...
- Bean 的作用域
•在 Spring 中, 可以在 <bean> 元素的 scope 属性里设置 Bean 的作用域. 默认情况下, Spring 只为每个在 IOC 容器里声明的 Bean 创建唯一一个实 ...
- win10前面板耳机没声音
首先去装Relteck的驱动,windows64位的下载地址是: http://12244.wpc.azureedge.net/8012244/drivers/rtdrivers/pc/audio/0 ...