背景:虽然现在react,vue等框架开启了前端开发的新篇章,
但对于一些比较复杂的页面,比如想在项目里面生成
组织架构图,人员汇报关系等还是需要用到之前的
jquery插件。比如:
首先要在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的方式引用:
CMD写法
function orgOrgChart(data){
//插件逻辑
}
$(function(){
//页面逻辑
})
module.exportsOrgChart = orgOrgChart //导出函数
AMD写法:
define(["jquery"],function($){
...
var initialChart = function(data){
//插件逻辑
}
...
$(function(){
//页面逻辑
})
...
return{
initialChart:initialChart //导出函数
}
})
最后在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地址,欢迎start,issue。
更多推荐
react怎么引入jquery_在react里面使用jquery插件
发布评论