はじめに
元記事: Reactによるアコーディオンメニューの実装方法 https://nishinatoshiharu.com/react-accordion/#_react-spring
が、ReactNodeと言うのを使ってアコーディオンを実装していて、codesandboxで実際に動いていました。
が、そのままcodepenに持って行ったところ動きません。
動きから逆に今の私の知識で同じことをやってみようと思い、とりあえず見た目はそっくりに出来ました。それに多分今どきのReactではこのように作るのが良いのではないか、と思います。
実装例
See the Pen react-accordion-menu by kalz2q (@kalz2q) on CodePen.
解説
他にも元記事にあって使っていないのはFC, useRef, Props, ReactSVGなど。
元のコードは読んでわからなかったので、解説の方を頼りにコーディングしました。
useStateによるアコーディオンの開閉制御、transitionによるアニメーション、条件付きレンダーによる矢印アイコンの有無の制御、などはclassNameの付け外しで実現しました。
svgはReactSVGを使わずに直接埋め込んでいます。
元記事はとても勉強になったので感謝しています。
