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插件的更多相关文章

  1. pasteimg浏览器中粘贴图片jQuery插件

    pasteimg是一款可以在浏览器中实现图片粘贴的jQuery插件,兼容Chrome.Firefox.IE11以及其他使用这些内核的浏览器,比如,国内著名的360浏览器. pasteimg可以识别浏览 ...

  2. DWZ(JUI) 教程 中如何整合第三方jQuery插件

    Query插件一般是$(document).ready()中初始化 $(document).ready(function(){  // 文档就绪,初始化jQuery插件| });  // 或者或缩写形 ...

  3. jquery插件封装成seajs模块

    jquery直接在html中引入. jquery插件修改为: define(function (require, exports, moudles) { return function (jquery ...

  4. jQuery插件实践之轮播练习(二)

    所有文章搬运自我的个人主页:sheilasun.me 上一篇中学习了jQuery插件的写法,这篇该着手实现啦.首先明确一下轮播要具备哪些功能: 可以点击"向后"按钮向后翻页 可以点 ...

  5. 使用requireJS的shim參数,完毕jquery插件的载入

    没有requireJS框架之前,假设我们想使用jquery框架,会在HTML页面中通过<script>标签载入.这个时候jquery框架生成全局变量$和jQuery等全局变量.假设项目中引 ...

  6. react 或 vue 中引用 jQuery 插件

    前言 今天与遇到一个令人抓狂的事情, 因为项目中有个交互太过于复杂而且冷门, 没有人封装类似react-swiper那种的移植过来的插件 只有现成的jQuery插件. 而时间并不宽裕,自己重写成rea ...

  7. 在react里面使用jquery插件

    在react里面使用jquery插件 背景: 虽然现在react,vue等框架开启了前端开发的新篇章, 但对于一些比较复杂的页面,比如想在项目里面生成 组织架构图,人员汇报关系等还是需要用到之前的 j ...

  8. 在Web工程中引入Jquery插件报错解决方案

    在学习Jquery插件的时候,遇到一个问题就是新建web工程后在WebRoot下引入Jquery插件的时候报错,不知道为什么好纠结,但是项目能正常运行,后来找到解决方案,在这里给大家分享一下. 解决方 ...

  9. jQuery插件中的this指的是什么

    在jQuery插件的范围里, this关键字代表了这个插件将要执行的jQuery对象, 但是在其他包含callback的jQuery函数中,this关键字代表了原生的DOM元素.这常常会导致开发者误将 ...

随机推荐

  1. SqlServer——全文索引

    当我们想要模糊查询时,之前用like %来进行查询,但是为了提高查询速度,提出了全文索引. 全文索引是用空间换取了时间,它将每个表中的数据进行切分存储,这样就能很快的定位到模糊查询的数据. 全文索引快 ...

  2. 快速向表中插入大量数据Oracle中append与Nologging

    来源于:http://blog.sina.com.cn/s/blog_61cd89f60102e7gi.html 当需要对一个非常大的表INSERT的时候,会消耗非常多的资源,因为update表的时候 ...

  3. android请求root权限

    应用获取Root权限的原理:让应用的代码执行目录获取最高权限.在Linux中通过chmod 777 [代码执行目录] //请求root权限    public static boolean upgra ...

  4. Android Studio 解决更新慢的问题

    Android Studio 解决更新慢的问题 最近在一些群里有伙伴们反应工具更新慢,由于国内网络对google限制的原因,android studio更新一直是个老大难的问题,为了,提高sdk下载的 ...

  5. Hibernate断网修改配置文件实现正常验证运行

    hibernate.cfg.xml中声明部分: <!DOCTYPE hibernate-configuration PUBLIC"-//Hibernate/Hibernate Conf ...

  6. iOS不得姐项目--TabBar的重复点击实现当前模块刷新;状态栏点击实现当前模块回滚到最顶部

    一.实现功能:重复点击tabBar,刷新当前TableView,其余不受影响 <1>实现思路: 错误的方法: TabBar成为自己的代理,监听自己的点击--这种方法是不可取的,如果外面设置 ...

  7. 【BZOJ 4518】【SDOI 2016 Round1 Day2 T3】征途

    比较明显的斜率优化DP,省选时因为时间太紧张和斜率DP写得不熟等原因只写了60分的暴力DP,其实当时完全可以对拍来检验标算的正确,但是我当时too naive- 很快打完了,调了将近一晚上QAQ,因为 ...

  8. 如何在HTMl网页中插入百度地图

    方法/步骤 1.打开"百度地图生成器"的网址:http://api.map.baidu.com/lbsapi/creatmap/index.html 如下图: 2.在"1 ...

  9. 【奶昔队ROUND#1】

    奶昔队Round #1 热身 (奶昔队不是真正的队,是群) CodeForces 435C Cardiogram 模拟,不过我做的时候不是模拟,是计算...(写了好久,还wa了几次),现在看了别人的代 ...

  10. java多线程synchronized底层实现

    一直想把这个特别重要的关键词的底层实现搞明白.(当然现在也没有完全明白,如果有错误以后修改这篇文章) 首先,这个关键词synchronize可以说是个语法糖,它的具体用法网上很多博客都讲的比较明了了. ...