React のコンポーネントベースのアーキテクチャを犠牲にすることなく、jQuery を ReactJS に統合してアコーディオンを構築するにはどうすればよいですか?

jQuery と ReactJS のインターフェース: 総合ガイド

ReactJS の初心者として、jQuery の多機能性から ReactJS のコンポーネント化されたアプローチに移行する際に課題に直面する可能性があります。 。この記事では、特にアコーディオンの作成というコンテキストで、jQuery を ReactJS に統合する方法を説明します。

ステップ 1: アコーディオンを理解する

HTML フォームの場合、アコーディオンは複数のセクションで構成され、各セクションにはヘッダーと折りたたみ可能な本体が含まれます。 jQuery を使用すると、イベント リスナーを使用してこれらの要素を動的に操作できます。

ステップ 2: jQuery を ReactJS に組み込む

jQuery を ReactJS に統合するには、次の手順に従います。

1. コマンド ラインを使用してプロジェクト ディレクトリに移動します。

2. 次のコマンドで npm を使用して jQuery をインストールします。

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

3. Import jQuery使用する必要がある JSX ファイルにコピーします。

   import $ from 'jquery';

ステップ 3: jQuery コードを ReactJS に変換する

jQuery を変換するにはアコーディオンのコードを ReactJS に追加すると、状態管理を使用して本体セクションの可視性を処理できます。以下に例を示します。

import React, { useState } from 'react';

const Accordion = () => {
  const [activeSection, setActiveSection] = useState(null);

  const handleHeadClick = (e) => {
    const section = e.target.parentElement;
    if (section === activeSection) {
      setActiveSection(null);
    } else {
      setActiveSection(section);
    }
  };

  return (
    <div className="accor">
      {sections.map((section) => (
        <div key={section.id} className="section">
          <div className="head" onClick={handleHeadClick}>{section.header}</div>
          <div className={`body ${activeSection === section ? '' : 'hide'}`}>{section.body}</div>
        </div>
      ))}
    </div>
  );
};

結論

これらの手順に従うことで、ReactJS 内で jQuery の機能を活用し、コンポーネントを損なうことなく複雑なユーザー インターフェイスを作成できます。 ReactJS のベースのアーキテクチャ

以上がReact のコンポーネントベースのアーキテクチャを犠牲にすることなく、jQuery を ReactJS に統合してアコーディオンを構築するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。