在react里面使用jquery插件

mumumu 发布于2019-08-21 16:26 / 3159人阅读

摘要：在里面使用插件背景虽然现在等框架开启了前端开发的新篇章，但对于一些比较复杂的页面，比如想在项目里面生成组织架构图，人员汇报关系等还是需要用到之前的插件。

在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

私有云混合云 dw里面php插件 react使用webrtc jquery插件源码jquery jquery插件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88552.html

和其他库（jquery,backbone）一起使用react

摘要：也就是说，只要一发生事件。和其他的库共用由于方法的灵活性使得可以被嵌入到其他的应用中。事实上，这就是在被使用的方式。在应用中使用的层在组件中消费中和最简单的方法是监听各种事件并手动进行强制更新。并且使用组件来渲染各个项。注：由于译者水平有限，难免会出现错误，希望大家能指出，谢谢。 react 可以被用在任何的web 应用中。它可以被嵌入到其他的应用中，要是你小心一点，其他的应用也能被...

ckllj 2019-08-21 16:39 评论0 收藏0
react+webpack项目常用的插件(plugins)

一、HtmlWebpackPlugin使用： npm install html-webpack-plugin --save-dev 解释：这个插件是简化创建生成html（h5）文件用的，如果你引入的文件带有hash值的话，这个尤为的有用，不需要手动去更改引入的文件名！默认生成的是index.html,基本用法为： var HtmlWebpackPlugin = require(html-webp...

cyixlq 2019-08-20 15:52 评论0 收藏0
jquery组织架构图插件

摘要：点击加减号按钮可以显示与隐藏当前节点的子节点。源码解析插件的写法这里的可以取到调用时传的参数最后附上地址欢迎 jquery插件说明 jquery插件皆可用于react,使用方法:react中使用jquery插件效果图 showImg(https://segmentfault.com/img/bVX24E?w=895&h=756); 使用方法: $(.orgWrap).lenChar...

sydMobile 2019-08-20 19:07 评论0 收藏0
jquery组织架构图插件

摘要：点击加减号按钮可以显示与隐藏当前节点的子节点。源码解析插件的写法这里的可以取到调用时传的参数最后附上地址欢迎 jquery插件说明 jquery插件皆可用于react,使用方法:react中使用jquery插件效果图 showImg(https://segmentfault.com/img/bVX24E?w=895&h=756); 使用方法: $(.orgWrap).lenChar...

tolerious 2019-08-01 17:33 评论0 收藏0
jquery组织架构图插件

摘要：点击加减号按钮可以显示与隐藏当前节点的子节点。源码解析插件的写法这里的可以取到调用时传的参数最后附上地址欢迎 jquery插件说明 jquery插件皆可用于react,使用方法:react中使用jquery插件效果图 showImg(https://segmentfault.com/img/bVX24E?w=895&h=756); 使用方法: $(.orgWrap).lenChar...

LeexMuller 2019-08-05 11:59 评论0 收藏0