【原】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  總之就一句話,只是調用時的名字換了,其他的用法都是跟原來的插件一模一樣的。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM