fix: AccordionPanel 開閉時にコンソールエラーが発生する問題を修正

[s-sasaki-0529]

Related URL

N/A

Overview

AccordionPanel を開いた際に、確定で以下のエラーがコンソール上に発生する (開発環境のみ)

Warning: findDOMNode is deprecated and will be removed in the next major release. Instead, add a ref directly to the element you want to reference.

これは react-transition-group の <Transition> コンポーネントにて React.findDOMNode を使用しているが、これは既に非推奨な関数で、次期バージョン (React 19) では廃止されるため、それを警告するメッセージが表示されている。

長期的には React 19 でも AccordionPanel を使用できるようにするため、短期的には余計なコンソールエラーを表示させないためにこの問題を解消したい。

What I did

以下 Issue を参考にすると、Transition コンポーネントは、トランジション対象の要素を取得するために React.findDOMNode を使用しているが、対象要素を nodeRef props で渡してあげることで、これの実行を回避することができる模様。

• findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. reactjs/react-transition-group#904

なので、現行では React.findDOMNode で取得される要素の ref を渡してあげることで、挙動を変えずにこの問題を修正する。

確認したこと

Storybook で AccordionPanel のストーリーを開き、パネルを開くと

• 変更前: コンソールエラーが出る
• 変更後: コンソールエラーが出ない

[s-sasaki-0529]

refs: https://reactcommunity.org/react-transition-group/transition#Transition-prop-nodeRef

This prop is optional, but recommended in order to avoid defaulting to ReactDOM.findDOMNode, which is deprecated in StrictMode

とのことなので従う。 react-transition-group 自体もう2年間更新されていないので、この回避法で良さそう。

[Tokky0425]

ありがとうございます！ 🌮