在react里面使用jquery插件
来源:互联网 发布:名图轮毂17寸轮毂数据 编辑:程序博客网 时间:2024/06/04 19:44
在react里面使用jquery插件
背景:
虽然现在react,vue等框架开启了前端开发的新篇章, 但对于一些比较复杂的页面,比如想在项目里面生成 组织架构图,人员汇报关系等还是需要用到之前的 jquery插件。比如:
jsplumb
spacetree
lenchart
首先要在react里面引用jquery
cnpm i --save-dev jquery 修改webpack配置文件: plugins:[ new webpack.ProvidePlugin({ $:"jquery", jQuery:"jquery", "window.jQuery":"jquery" }) ]
将$变量挂载到window下面,可以在项目中直接使用$,不用再引用
使用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(){ //页面逻辑 }) 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) } ....
github
阅读全文
0 0
- 在react里面使用jquery插件
- 在DotNetNuke模块里面使用Jquery插件的方法(转)
- 在angular里面使用jQuery和bootstrap
- 在 ASP.NET 使用 jQuery BlockUI 插件
- 在struts2中使用jQuery插件ajaxfileupload
- jquery 里面toggle使用
- Scott 教我们如何在VS2008里面使用 Jquery
- 在js或者jquery里面能使用el表达式吗
- eclipse里面使用github插件
- PHP在使用编辑器插件的时候,怎么在textarea标签里面输出值
- react+webpack 下使用eslint以及eslint插件在sublime下的安装使用
- 使用jQuery的插件在客户端来管理Cookie
- 在 Wordpress 插件中使用 Javascript(jQuery) 脚本
- 在ASP.NET中使用JQuery多文件上传插件
- 分享在MVC3.0中使用jQuery DataTable 插件
- 分享在MVC3.0中使用jQuery DataTable 插件
- 对于Jquery Dialog插件在frameset中的使用
- 分享在MVC3.0中使用jQuery DataTable 插件
- 系统学习深度学习(四十一)--PVANet
- java作业
- 健康问答语料的爬虫(C#)
- eclipse提示小应用程序未初始化
- 深度学习概述
- 在react里面使用jquery插件
- 2015百度校招--机器学习、数据挖掘工程师笔试题
- 导入(doc,docx,pdf格式)简历,doc/docx,转pdf格式,并且检索doc,docx,pdf,字段
- Arcgis---画线
- Spark的Application和依赖的公共jar包单独存放
- CCF 201609-1 最大波动
- 如何最省钱的使用阿里云公网产品
- 9.12(图论的基本存储)
- string类型的常用操作