Lifeプログラミングブログ運営ライフハックお金キャリアお問い合わせサイトマップHOMEプログラミングJavaScriptReactによるアコーディオンメニューの実装方法Reactによるアコーディオンメニューの実装方法2022年8月28日JavaScriptツイートシェアはてブ1送るPocket2アコーディオンとはクリックをトリガとした開閉式のUIコンテンツのことを指します。今回はReactで実装したアコーディオンメニューのサンプルコードについて紹介します。18.8Z"/></svg>上記の実装で利用されているテクニックは以下の通りです。以下では上記のテクニックについてそれぞれ解説します。今回の実装ではchildrenのheightがアコーディオンによって展開されるコンテンツの高さとなります。childrenのheightを制御することでアコーディオンの開閉を実現しています。DOMの参照はuseRefを利用することで取得できます。以下はuseRefを利用してDOMの高さを取得する例です。);};なお、useRefの詳細解説は【React】useRef/forwardRefの概要と使いどころで紹介しています。useStateによるアコーディオンの開閉制御アコーディオンの開閉制御はローカルStateで管理しています。クリックをトリガにローカルStateをトグルさせることでアコーディオンの開閉を実現しています。以下はローカルStateでDOMの表示・非表示を制御する例です。App;transitionによるアニメーションアコーディオンの開閉のアニメーションはtransitionで実現しています。以下はローカルStateの変更によって適用されるCSSの変化を、transitionによってアニメーション化する例です。*/}なお、transitionの詳細解説は【CSS】transitionでアニメーションを実現する方法で紹介しています。条件付きレンダーによる矢印アイコンの有無の制御アコーディオンのクリック領域は矢印アイコンの有無で識別しています。アイコンの表示制御はPropsから渡された制御フラグによる条件付きレンダーで実現しています。アイコンの向きが変わるアニメーションはtransitionとtransformを組み合わせて実現しています。以下は条件付きレンダーによってアイコンの表示制御を行う例です。translateY(50%);}なお、条件付きレンダーの詳細解説は【React】JSXでif文を利用して要素を出し分ける(条件付きレンダー)方法で紹介しています。今回SVGアイコンの表示にはreact-svgを利用しています。React環境でSVGを表示する方法についてはReact環境で手軽にSVGを表示する方法で紹介しています。アコーディオンのサンプルコード冒頭で紹介したサンプルコードを再掲します。react-springを利用した実装例アコーディオンの開閉アニメーションをreact-springで実装した例について紹介します。);};さいごにTwitter(@nishina555)やってます。フォローしてもらえるとうれしいです!RECOMMENDJavaScriptReactツイートシェアはてブ1送るPocket2プロフィールnishina大企業、ベンチャーと色々なところでWebエンジニアやっています。退職手続きから案件参画まで。人気の記事iPhoneの連絡先の保存がうまくできない!?原因は同期設定かも。