react里能嵌入jquery。方法：1、利用“npm install jquery –save”安裝jquery；2、修改webpack配置文件；3、利用“require(jquery.plugin路徑)”引用jquery插件即可使用。

本教程操作環(huán)境：Windows10系統(tǒng)、react17.0.1版、Dell G3電腦。

react里能嵌入jquery嗎

react里能嵌入jquery

首先要在react里面安裝jquery

npm install jquery --save

將$變量掛載到window下面，可以在項(xiàng)目中直接使用$,不用再引用

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

使用jquery插件的姿勢(shì)

首先用 require(/your/path/jquery.plugin) 引用jquery插件

webpack支持ES6的import,requirejs,commonjs語(yǔ)法，可以用CMD,

AMD的方式引用。

AMD寫法：

     define(["jquery"],function($){          ...          var initialChart = function(data){              //插件邏輯          }          ...          $(function(){              //頁(yè)面邏輯          })          ...                    return{             initialChart:initialChart //導(dǎo)出函數(shù)          }       })

CMD寫法

 function orgOrgChart(data){           //插件邏輯       }       $(function(){              //頁(yè)面邏輯       })       module.exports.orgOrgChart = orgOrgChart //導(dǎo)出函數(shù)

最后在react里面引用導(dǎo)出的函數(shù)并在生命周期函數(shù)里面調(diào)用

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

推薦學(xué)習(xí)：《react視頻教程》