在react里面使用jquery插件

mumumu 發布于2019-08-21 16:26 / 3326人閱讀

摘要：在里面使用插件背景雖然現在等框架開啟了前端開發的新篇章，但對于一些比較復雜的頁面，比如想在項目里面生成組織架構圖，人員匯報關系等還是需要用到之前的插件。

在react里面使用jquery插件 背景:

 雖然現在react,vue等框架開啟了前端開發的新篇章，
 但對于一些比較復雜的頁面，比如想在項目里面生成
 組織架構圖，人員匯報關系等還是需要用到之前的
 jquery插件。比如：

jsplumb
spacetree
lenchart

首先要在react里面安裝jquery

npm install jquery --save

將$變量掛載到window下面，可以在項目中直接使用$,不用再引用

     //修改webpack配置文件:
     plugins:[
        new webpack.ProvidePlugin({
        $:"jquery",
        jQuery:"jquery",
        "window.jQuery":"jquery"
        })
      ]

使用jquery插件的姿勢

首先用 require(/your/path/jquery.plugin) 引用jquery插件

 webpack支持ES6的import,requirejs,commonjs語法，可以用CMD,
 AMD的方式引用。

AMD寫法：

     define(["jquery"],function($){
         ...
         var initialChart = function(data){
             //插件邏輯
         }
         ...
         $(function(){
             //頁面邏輯
         })
         ...
         
         return{
            initialChart:initialChart //導出函數
         } 
     })

CMD寫法

 function orgOrgChart(data){
          //插件邏輯
      }
      $(function(){
             //頁面邏輯
      })
      module.exports.orgOrgChart = orgOrgChart //導出函數

最后在react里面引用導出的函數并在生命周期函數里面調用

     import {initialChart} from "../../es5Components/emp-orgChart.js" 
     import {orgOrgChart} from "../../es5Components/emp-orgChart.js" 
     
     ...
     componentDidMount(){
         initialChart(this.state.data);
         orgOrgChart(this.state.data)
     }
     ....

安利自己在寫的react項目 github，歡迎star

GPU云服務器云服務器 dw里面php插件 react使用webrtc jquery插件源碼jquery jquery插件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88552.html

和其他庫（jquery,backbone）一起使用react

摘要：也就是說，只要一發生事件。和其他的庫共用由于方法的靈活性使得可以被嵌入到其他的應用中。事實上，這就是在被使用的方式。在應用中使用的層在組件中消費中和最簡單的方法是監聽各種事件并手動進行強制更新。并且使用組件來渲染各個項。注：由于譯者水平有限，難免會出現錯誤，希望大家能指出，謝謝。 react 可以被用在任何的web 應用中。它可以被嵌入到其他的應用中，要是你小心一點，其他的應用也能被...

ckllj 2019-08-21 16:39 評論0 收藏0
react+webpack項目常用的插件(plugins)

一、HtmlWebpackPlugin使用： npm install html-webpack-plugin --save-dev 解釋：這個插件是簡化創建生成html（h5）文件用的，如果你引入的文件帶有hash值的話，這個尤為的有用，不需要手動去更改引入的文件名！默認生成的是index.html,基本用法為： var HtmlWebpackPlugin = require(html-webp...

cyixlq 2019-08-20 15:52 評論0 收藏0
jquery組織架構圖插件

摘要：點擊加減號按鈕可以顯示與隱藏當前節點的子節點。源碼解析插件的寫法這里的可以取到調用時傳的參數最后附上地址歡迎 jquery插件說明 jquery插件皆可用于react,使用方法:react中使用jquery插件效果圖 showImg(https://segmentfault.com/img/bVX24E?w=895&h=756); 使用方法: $(.orgWrap).lenChar...

sydMobile 2019-08-20 19:07 評論0 收藏0
jquery組織架構圖插件

摘要：點擊加減號按鈕可以顯示與隱藏當前節點的子節點。源碼解析插件的寫法這里的可以取到調用時傳的參數最后附上地址歡迎 jquery插件說明 jquery插件皆可用于react,使用方法:react中使用jquery插件效果圖 showImg(https://segmentfault.com/img/bVX24E?w=895&h=756); 使用方法: $(.orgWrap).lenChar...

tolerious 2019-08-01 17:33 評論0 收藏0