Can jquery be embedded in react?

jquery can be embedded in react. Method: 1. Use "npm install jquery --save" to install jquery; 2. Modify the webpack configuration file; 3. Use "require (jquery.plugin path)" to reference the jquery plug-in.

The operating environment of this tutorial: Windows 10 system, react17.0.1 version, Dell G3 computer.

Can jquery be embedded in react

Can jquery be embedded in react

First of all, jquery must be installed in react

npm install jquery --save

The $ variable is mounted under the window. You can use $ directly in the project without citing it.

     //修改webpack配置文件:
     plugins:[
        new webpack.ProvidePlugin({
        $:"jquery",
        jQuery:"jquery",
        "window.jQuery":"jquery"
        })
      ]

How to use the jquery plug-in

First use require(/your/path/jquery.plugin) Quoting the jquery plug-in

webpack supports ES6's import, requirejs, and commonjs syntax, which can be referenced using CMD,

AMD.

AMD writing method:

     define(["jquery"],function($){
         ...
         var initialChart = function(data){
             //插件逻辑
         }
         ...
         $(function(){
             //页面逻辑
         })
         ...
         
         return{
            initialChart:initialChart //导出函数
         } 
     })

CMD writing method

 function orgOrgChart(data){
          //插件逻辑
      }
      $(function(){
             //页面逻辑
      })
      module.exports.orgOrgChart = orgOrgChart //导出函数

Finally quote the exported function in react and call it in the life cycle function

     import {initialChart} from '../../es5Components/emp-orgChart.js' 
     import {orgOrgChart} from '../../es5Components/emp-orgChart.js' 
     
     ...
     componentDidMount(){
         initialChart(this.state.data);
         orgOrgChart(this.state.data)
     }
     ....

Recommended learning: "react video tutorial"

The above is the detailed content of Can jquery be embedded in react?. For more information, please follow other related articles on the PHP Chinese website!