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