高度な機能を実現するために、jQuery を React アプリケーションに効果的に統合するにはどうすればよいですか?

高度な機能を実現するために jQuery を ReactJS に統合する

jQuery から ReactJS に移行する場合、jQuery の使用を最小限に抑え、React の機能を活用する方法を検討することが重要です。そのようなシナリオの 1 つは、アコーディオンの作成に関係しており、jQuery の slideUp() メソッドと slideDown() メソッドが伝統的に使用されてきました。

<code class="jquery">$('.accor > .head').on('click', function() {
  $('.accor > .body').slideUp();
  $(this).next().slideDown();
});</code>

しかし、ReactJS では、コンポーネントベースの哲学に沿った代替アプローチが必要です。

ステップ 1: 外部ライブラリを活用する

jQuery を ReactJS に組み込むには、npm などの外部ライブラリを利用できます。プロジェクト フォルダーに移動し、次のコマンドを実行します。

npm install jquery --save
npm i --save-dev @types/jquery

これにより、jQuery とその型定義がインストールされます。

ステップ 2: jQuery をインポートする

jQuery 機能が必要な JSX ファイル内で、「jquery」から $ をインポートします。

例:

import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';

// React component code

ステップ 3: jQuery を使用するReact のライフサイクル

jQuery とは異なり、React はコンポーネントのライフサイクルに従います。特定のライフサイクル段階で jQuery コードを実行するには、componentDidMount() または componentDidUpdate() の使用を検討してください。

componentDidMount() {
  // jQuery code here
}

完全な例:

import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';

class Accordion extends React.Component {
  componentDidMount() {
    $('.accor > .head').on('click', function() {
      $('.accor > .body').slideUp();
      $(this).next().slideDown();
    });
  }

  render() {
    return (
      <div>
        <div class="accor">
          <div class="head">Head 1</div>
          <div class="body hide">Body 1</div>
        </div>
        {/* Additional accordion items here */}
      </div>
    );
  }
}

ReactDOM.render(<accordion></accordion>, document.getElementById('root'));

次の手順に従ってくださいを使用すると、コンポーネントベースの開発のベスト プラクティスを維持しながら、必要に応じて jQuery を ReactJS アプリケーションにシームレスに統合できます。

以上が高度な機能を実現するために、jQuery を React アプリケーションに効果的に統合するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。