ReactのStrictModeでCSSTransitionのfindDOMNodeが非推奨になったエラーの解決方法

findDOMNodeの代替方法を使用する: Reactのバージョン16.3以降では、findDOMNodeが非推奨になり、代わりにrefを使用することが推奨されています。CSSTransitionコンポーネントにrefを追加し、必要なDOMノードにアクセスすることができます。以下は例です。

import React, { useRef } from 'react';
import { CSSTransition } from 'react-transition-group';
const ExampleComponent = () => {
  const nodeRef = useRef(null);
  return (
    <CSSTransition
      nodeRef={nodeRef}
      /* 他のプロパティ */
    >
      <div ref={nodeRef}>
        {/* コンポーネントの内容 */}
      </div>
    </CSSTransition>
  );
};
export default ExampleComponent;

StrictModeを一時的に無効化する: StrictModeは開発中の問題を検出するためのツールであり、一部の古いコードやライブラリとの互換性の問題が発生することがあります。CSSTransitionのfindDOMNodeが非推奨になったエラーが致命的でない場合、一時的にStrictModeを無効化することで回避できます。ただし、本番環境での使用は避けることをおすすめします。

StrictModeを無効化するには、ReactDOM.renderの呼び出し時にStrictModeコンポーネントを削除するか、AppコンポーネントをStrictModeでラップしている箇所を修正します。以下は例です。

import React from 'react';
import ReactDOM from 'react-dom';
import { CSSTransition } from 'react-transition-group';
const ExampleComponent = () => {
  // コンポーネントの内容
};
ReactDOM.render(
  <ExampleComponent />,
  document.getElementById('root')
);