高度な機(jī)能を?qū)g現(xiàn)するために jQuery を ReactJS に統(tǒng)合する

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

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

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

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

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

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

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

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

jQuery 機(jī)能が必要な JSX ファイル內(nèi)で、「jquery」から $ をインポートします。

例:

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

// React component code

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

jQuery とは異なり、React はコンポーネントのライフサイクルに従います。特定のライフサイクル段階で jQuery コードを?qū)g行するには、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 />, document.getElementById('root'));

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

以上が高度な機(jī)能を?qū)g現(xiàn)するために、jQuery を React アプリケーションに効果的に統(tǒng)合するにはどうすればよいですか?の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。