ReactJS で jQuery をいつどのように使用する必要がありますか?

ReactJS での jQuery の使用

はじめに

ReactJS は人気のある JavaScript フレームワークであり、 Web開発におけるjQuery。どちらのテクノロジーにもそれぞれ長所がありますが、ReactJS 内で jQuery の機能を活用することが有益な場合もあります。

シナリオ: jQuery を使用してアコーディオンを作成する

このシナリオでは、ユーザーは、jQuery を使用してアコーディオン コンポーネントを実装したいと考えています。これには、対応するヘッドをクリックすると本体が展開または折りたたまれることが含まれます。

jQuery 実装:

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

ReactJS と同等

ReactJS で同様の機能を実現するには、状態管理を使用して各本体の可視性を切り替えることができます。

状態管理:
ReactJS では、状態はコンポーネントの現在の値を保持し、その動作を決定するオブジェクトです。アコーディオンの初期状態は次のように定義できます。

<code class="javascript">const Accordion = () => {
  const [accordions, setAccordions] = useState([
    { id: 1, title: 'Head 1', content: 'Body 1', visible: false },
    // ...
  ]);
};
</code>

イベント ハンドラー:
head 要素のクリック イベントを処理し、

<code class="javascript">const handleClick = (index) => {
  // Clone the current state to avoid mutations
  const newAccordions = [...accordions];
  newAccordions[index].visible = !newAccordions[index].visible;
  setAccordions(newAccordions);
};</code>

アコーディオンのレンダリング:

アコーディオンは、アイテムを反復処理し、表示されている内容に基づいてボディを条件付きで表示するマップ関数を使用してレンダリングされます。 state.

<code class="javascript">render() {
  return (
    <div>
      {accordions.map((accordion, index) => (
        <accordionitem key="{accordion.id}" title="{accordion.title}" content="{accordion.content}" visible="{accordion.visible}" handleclick="{()"> handleClick(index)} />
      ))}
    </accordionitem>
</div>
  );
}</code>

jQuery の統合

jQuery を使用せずにアコーディオンを実装しましたが、必要に応じて jQuery を組み込むことも可能です。 npm を利用することで、jQuery をインストールし、ReactJS コンポーネントにインポートできます。

<code class="javascript">import $ from 'jquery';
// ...

const Button = () => {
  $(document).ready(function(){
    // Use jQuery here
  });

  return (
    <button>...</button>
  );
};</code>

結論として、ReactJS の状態管理とコンポーネントのライフサイクルを使用して jQuery の機能を複製することは可能ですが、それ以上のシナリオが存在する可能性があります。特定のタスクに jQuery を統合すると便利です。

以上がReactJS で jQuery をいつどのように使用する必要がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。