亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

在react里面使用jquery插件

mumumu / 3395人閱讀

摘要：在里面使用插件背景雖然現(xiàn)在等框架開啟了前端開發(fā)的新篇章，但對(duì)于一些比較復(fù)雜的頁(yè)面，比如想在項(xiàng)目里面生成組織架構(gòu)圖，人員匯報(bào)關(guān)系等還是需要用到之前的插件。

在react里面使用jquery插件 背景: 
 雖然現(xiàn)在react,vue等框架開啟了前端開發(fā)的新篇章，
 但對(duì)于一些比較復(fù)雜的頁(yè)面，比如想在項(xiàng)目里面生成
 組織架構(gòu)圖，人員匯報(bào)關(guān)系等還是需要用到之前的
 jquery插件。比如：

jsplumb
spacetree
lenchart

首先要在react里面安裝jquery 
npm install jquery --save
將$變量掛載到window下面，可以在項(xiàng)目中直接使用$,不用再引用
     //修改webpack配置文件:
     plugins:[
        new webpack.ProvidePlugin({
        $:"jquery",
        jQuery:"jquery",
        "window.jQuery":"jquery"
        })
      ]
使用jquery插件的姿勢(shì)
首先用 require(/your/path/jquery.plugin) 引用jquery插件
 webpack支持ES6的import,requirejs,commonjs語(yǔ)法，可以用CMD,
 AMD的方式引用。
AMD寫法：
     define(["jquery"],function($){
         ...
         var initialChart = function(data){
             //插件邏輯
         }
         ...
         $(function(){
             //頁(yè)面邏輯
         })
         ...
         
         return{
            initialChart:initialChart //導(dǎo)出函數(shù)
         } 
     })
CMD寫法
 function orgOrgChart(data){
          //插件邏輯
      }
      $(function(){
             //頁(yè)面邏輯
      })
      module.exports.orgOrgChart = orgOrgChart //導(dǎo)出函數(shù)
最后在react里面引用導(dǎo)出的函數(shù)并在生命周期函數(shù)里面調(diào)用 
     import {initialChart} from "../../es5Components/emp-orgChart.js" 
     import {orgOrgChart} from "../../es5Components/emp-orgChart.js" 
     
     ...
     componentDidMount(){
         initialChart(this.state.data);
         orgOrgChart(this.state.data)
     }
     ....
安利自己在寫的react項(xiàng)目 github，歡迎star

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/88552.html

相關(guān)文章

  • 和其他庫(kù)（jquery,backbone）一起使用react

    摘要：也就是說(shuō)，只要一發(fā)生事件。和其他的庫(kù)共用由于方法的靈活性使得可以被嵌入到其他的應(yīng)用中。事實(shí)上，這就是在被使用的方式。在應(yīng)用中使用的層在組件中消費(fèi)中和最簡(jiǎn)單的方法是監(jiān)聽各種事件并手動(dòng)進(jìn)行強(qiáng)制更新。并且使用組件來(lái)渲染各個(gè)項(xiàng)。 注：由于譯者水平有限，難免會(huì)出現(xiàn)錯(cuò)誤，希望大家能指出，謝謝。 react 可以被用在任何的web 應(yīng)用中。它可以被嵌入到其他的應(yīng)用中，要是你小心一點(diǎn)，其他的應(yīng)用也能被...

    ckllj 評(píng)論0 收藏0

  • react+webpack項(xiàng)目常用的插件(plugins)

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

    cyixlq 評(píng)論0 收藏0

  • jquery組織架構(gòu)圖插件

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

    sydMobile 評(píng)論0 收藏0

  • jquery組織架構(gòu)圖插件

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

    tolerious 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<