jqueryをreactに埋め込むことはできますか?-フロントエンドQ&A-php.cn

jqueryをreactに埋め込むことはできますか?

WBOY

リリース： 2022-04-21 16:34:34

オリジナル

2622 人が閲覧しました

jqueryはreactに埋め込むことができます。方法: 1. 「npm install jquery --save」を使用して jquery をインストールします; 2. webpack 構成ファイルを変更します; 3. 「require (jquery.plugin path)」を使用して jquery プラグインを参照します。

jqueryをreactに埋め込むことはできますか?

このチュートリアルの動作環境: Windows 10 システム、react17.0.1 バージョン、Dell G3 コンピューター。

react に jquery を埋め込むことができますか

react に jquery を埋め込むことができますか

まず、react に jquery をインストールする必要があります

npm install jquery --save

ログイン後にコピー

$ 変数はウィンドウの下にマウントされています。 $ は引用せずにプロジェクト内で直接使用できます。

     //修改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 &#39;../../es5Components/emp-orgChart.js&#39; 
     import {orgOrgChart} from &#39;../../es5Components/emp-orgChart.js&#39; 
     
     ...
     componentDidMount(){
         initialChart(this.state.data);
         orgOrgChart(this.state.data)
     }
     ....

ログイン後にコピー

推奨学習: 「React ビデオチュートリアル」

以上がjqueryをreactに埋め込むことはできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。