在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

来源:https://segmentfault.com/a/1190000011133781

在react里面使用jquery插件的更多相关文章

  1. react 或 vue 中引用 jQuery 插件

    前言 今天与遇到一个令人抓狂的事情, 因为项目中有个交互太过于复杂而且冷门, 没有人封装类似react-swiper那种的移植过来的插件 只有现成的jQuery插件. 而时间并不宽裕,自己重写成rea ...

  2. 【原】react中如何使用jquery插件

    react的思想是虚拟dom,提倡最好较少dom的操作,可是我们在写网页的时候,有些复杂的交互还是离不开jquery插件的.而且当你把jquery直接拿来用的时候,你会发觉会报错,要么是找不到那个插件 ...

  3. jquery插件模式开发和react组件开发之间的异同

    jquery插件模式开发和react组件开发之间的异同

  4. webpack+react+jquery和jquery插件

    要引入jquery插件 全局引入jquery plugins : [new webpack.ProvidePlugin({ $: 'jquery', jQuery:'jquery' "win ...

  5. jQuery 插件 Magnify 开发简介(仿 Windows 照片查看器)

    前言 因为一些特殊的业务需求,经过一个多月的蛰伏及思考,我开发了这款 jQuery 图片查看器插件 Magnify,它实现了 Windows 照片查看器的所有功能,比如模态窗的拖拽.调整大小.最大化, ...

  6. 详细图解jQuery对象,以及如何扩展jQuery插件

    详细图解jQuery对象,以及如何扩展jQuery插件 早几年学习前端,大家都非常热衷于研究jQuery源码.我还记得当初从jQuery源码中学到一星半点应用技巧的时候常会有一种发自内心的惊叹,“原来 ...

  7. Kendo UI for jQuery使用教程:初始化jQuery插件

    [Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...

  8. 前端基础进阶(十一):详细图解jQuery对象,以及如何扩展jQuery插件

    早几年学习前端,大家都非常热衷于研究jQuery源码.我还记得当初从jQuery源码中学到一星半点应用技巧的时候常会有一种发自内心的惊叹,“原来JavaScript居然可以这样用!” 虽然随着前端的发 ...

  9. 自己写jquery插件之模版插件高级篇(一)

    需求场景 最近项目改版中,发现很多地方有这样一个操作(见下图gif动画演示),很多地方都有用到.这里不讨论它的用户体验怎么样. 仅仅是从复用的角度,如果每个页面都去写text和select元素,两个b ...

随机推荐

  1. Anaconda3中Python3.5和Python2.7共存

    开始-所有程序-Anaconda3-Anaconda Prompt conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/a ...

  2. react-native 适配问题

    const ScreenWidth = Dimensions.get('window').width; static DimensionsTransform(px) { // 设计图纸以750为基准 ...

  3. JVM 常量池

    最近正好在研究这个问题,题主问题本身是有问题的,在JDK7中HotSpot的常量池是放在Java Heap中,并非题目中的native memory中.在JDK6中是放在Perm Space.题主可以 ...

  4. git 撤回上一次commit中某一个不想添加的文件

    1. 假设我们修改了文件a,同时修改了IDE的配置文件b 2.此时我们只想添加文件a到commit中,却不小心将b也添加进去了 3.那么怎么撤回呢? 4.第一种方法 :重新提交commit 5. 第二 ...

  5. Maven的构建配置文件(Build Profiles)

    在命令行使用构建配置文件时,是-P,比如:mvn -Pinput 注意:这里的构建配置文件并不是一个真正的文件,而是通过指定参数来做特定的事. 以下内容引用自https://ayayui.gitboo ...

  6. Objective-C基础笔记(6)Block

    Block(代码段)封装了一段代码,能够在不论什么时候运行. Block能够作为函数參数或者函数返回值,而其本身又能够带输入參数或返回值.它和传统的函数指针非常相似,可是有差别:block是inlin ...

  7. c#高级编程笔记----委托

    因为定义委托基本上是定义一个新类,所以可以在定义类的任何相同地方定义委托,也就是说,可以在另一个类的内部定义,也可以在任何类的外部定义,还可以在名称空间中把委托定义为顶层对象.根据定义的可见性,和委托 ...

  8. javascript 高级编程系列 - 函数

    一.函数创建 1. 函数声明 (出现在全局作用域,或局部作用域) function add (a, b) { return a + b; } function add(a, b) { return a ...

  9. 使用 kexec 快速重启 Linux

    http://www.ibm.com/developerworks/cn/linux/l-kexec/ 简介: 即使您的工作不要求您每天多次重新启动您的 Linux 机器,等待系统启动也实在是一件枯燥 ...

  10. idea安装plugin

    ---恢复内容开始--- ---恢复内容结束---