ReactJS では、アニメーションとインタラクションの管理をアプリケーション自体内で処理できます。ただし、JQuery が依然として役立つ場合もあります。 JQuery を使用して ReactJS でアコーディオン アニメーションを作成する方法は次のとおりです:
ステップ 1: JQuery をインストールします
プロジェクト フォルダーに移動し、npm を使用して JQuery をインストールします:
npm install jquery --save npm i --save-dev @types/jquery
ステップ 2: JQuery をインポートします
JSX ファイルで、次のように JQuery をインポートします。
import $ from 'jquery';
ステップ 3: 使用するJQuery
アコーディオン アニメーションを使用するコンポーネントで、次のコードを記述します。
$(document).ready(function() { $('.accor > .head').on('click', function() { $('.accor > .body').slideUp(); $(this).next().slideDown(); }); });
このコードは、ヘッダーをクリックすると表示されるアコーディオン効果を作成します。または、対応する本文セクションを非表示にします。
注:
ReactJS 内で JQuery を使用することは可能ですが、アニメーションを処理するには React の状態管理およびアニメーション機能を使用することを一般的に推奨します。アプリケーション自体内の相互作用。このアプローチにより、ReactJS 内での統合とパフォーマンスが向上します。
以上がJQuery は ReactJS のアコーディオン アニメーションを強化できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。