zoukankan      html  css  js  c++  java
  • 在react里面使用jquery插件

    在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

  • 相关阅读:
    Java类加载器总结
    Java程序编译和运行的过程
    Spring+Struts2+Hibernate整合
    Spring+MyBatis+SpringMVC整合
    声明式事务管理
    Scala sbt 添加国内镜像
    持续天数算法
    idea run shell set user name
    java insert mysql 中文乱码
    Samba服务器 安装
  • 原文地址:https://www.cnblogs.com/qixidi/p/10160761.html
Copyright © 2011-2022 走看看