ワーニングなので、今のところ動作には問題は起こっていなかったのですが、今後変な挙動を引き起こしても嫌なので、今の内から対処することにしました。
エラーメッセージは、タイトルにもある通り「Function components do not support contextType.」で、「関数コンポーネントはcontextTypeをサポートしていません。」とのことでした。
検索したところ、下記の記事がヒットしました。
Function components do not support contextType. · Issue #14061 · facebook/react · GitHub
https://github.com/facebook/react/issues/14061
上記記事によると、contextType を代入している行と、export default withRouter() の行を別の書き方に変更すればいいとのことでした。
記事にあった変更前のコードがこちら。
対象の記述のみ抜粋しています。
RegisterModal.contextType = ErrorContext; export default withRouter(RegisterModal);
上記のコードを、下記のように書き直すとワーニングが解消されるらしいです。
const WrappedClass = withRouter(RegisterModal); WrappedClass.WrappedComponent.contextType = ErrorContext; export default WrappedClass
一部を書き換えつつ、コードを修正して実行してみたところ、私の環境ではワーニングが発生しなくなりました！
ただ、何故これでワーニングが解消されるのかはよく分かっていないので、もう少し記事を読み込んでおきたいと思います…。
なお、別の記事では、contextType を代入している行と、export default の行を入れ替えて、先に export default withRouter() を記述する方法も紹介されていましたが、私の環境ではワーニングは解消されませんでした。
以上、React で 「Function components do not support contextType.」ワーニングが発生した時の対処方法についてでした。
ご参考になれば幸いです。
