摘要:在里面使用插件背景雖然現在等框架開啟了前端開發的新篇章,但對于一些比較復雜的頁面,比如想在項目里面生成組織架構圖,人員匯報關系等還是需要用到之前的插件。
在react里面使用jquery插件 背景:
雖然現在react,vue等框架開啟了前端開發的新篇章, 但對于一些比較復雜的頁面,比如想在項目里面生成 組織架構圖,人員匯報關系等還是需要用到之前的 jquery插件。比如:
jsplumb
spacetree
lenchart
npm install jquery --save
將$變量掛載到window下面,可以在項目中直接使用$,不用再引用
//修改webpack配置文件: plugins:[ new webpack.ProvidePlugin({ $:"jquery", jQuery:"jquery", "window.jQuery":"jquery" }) ]使用jquery插件的姿勢
webpack支持ES6的import,requirejs,commonjs語法,可以用CMD, AMD的方式引用。
define(["jquery"],function($){ ... var initialChart = function(data){ //插件邏輯 } ... $(function(){ //頁面邏輯 }) ... return{ initialChart:initialChart //導出函數 } })
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
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/88552.html
摘要:也就是說,只要一發生事件。和其他的庫共用由于方法的靈活性使得可以被嵌入到其他的應用中。事實上,這就是在被使用的方式。在應用中使用的層在組件中消費中和最簡單的方法是監聽各種事件并手動進行強制更新。并且使用組件來渲染各個項。 注:由于譯者水平有限,難免會出現錯誤,希望大家能指出,謝謝。 react 可以被用在任何的web 應用中。它可以被嵌入到其他的應用中,要是你小心一點,其他的應用也能被...
一、HtmlWebpackPlugin使用: npm install html-webpack-plugin --save-dev 解釋:這個插件是簡化創建生成html(h5)文件用的,如果你引入的文件帶有hash值的話,這個尤為的有用,不需要手動去更改引入的文件名! 默認生成的是index.html,基本用法為: var HtmlWebpackPlugin = require(html-webp...
摘要:點擊加減號按鈕可以顯示與隱藏當前節點的子節點。源碼解析插件的寫法這里的可以取到調用時傳的參數最后附上地址歡迎 jquery插件 說明 jquery插件皆可用于react,使用方法:react中使用jquery插件 效果圖 showImg(https://segmentfault.com/img/bVX24E?w=895&h=756); 使用方法: $(.orgWrap).lenChar...
摘要:點擊加減號按鈕可以顯示與隱藏當前節點的子節點。源碼解析插件的寫法這里的可以取到調用時傳的參數最后附上地址歡迎 jquery插件 說明 jquery插件皆可用于react,使用方法:react中使用jquery插件 效果圖 showImg(https://segmentfault.com/img/bVX24E?w=895&h=756); 使用方法: $(.orgWrap).lenChar...
閱讀 2067·2021-10-12 10:12
閱讀 788·2021-09-24 09:47
閱讀 1188·2021-08-19 11:12
閱讀 3462·2019-08-29 13:06
閱讀 681·2019-08-26 11:43
閱讀 2563·2019-08-23 17:20
閱讀 1146·2019-08-23 16:52
閱讀 2594·2019-08-23 14:27