2022年9月5日JavaScriptツイートシェアはてブ送るPocket前回、【React】createPortalによるポータルの作成・利用方法でポータルの概要について紹介しました。モーダルは代表的なポータルの応用例です。今回はポータルとContextを利用してモーダルを実装する方法について紹介します。Contextの概要については【React】useContexでContextを参照する手順で紹介しています。modalというidが付与されたdiv要素を探し、なければ作成。);};Contextを利用したポータルの表示・非表示の制御方法Contextを利用したポータル表示・非表示のアプローチは以下の通りです。Modal</h1>がセットされるためポータルが表示されます。閉じるボタンを押すとmodalNodeにnullがセットされるためポータルが非表示になります。modalNodeにセットするコンポーネントがポータルとして扱われるため、『任意のコンポーネントをモーダルとして表示する』ということが実現できます。この時点で以下のような画面が作成できます。カスタムフックを利用したリファクタリング上記のコードはカスタムフックを利用することで見通しがよくなります。div要素を作成する副作用をカスタムフックとして切り出すと以下のようになります。カスタムフックの詳細解説は【React】カスタムフックの概要・メリット・使いどころで紹介しています。以下のような仕様を満たすモーダルの実装例を紹介します。上下の20pxで高さの確保とテキストの上下中央よせを行う。10;}実装結果は以下の通りです。さいごにTwitter(@nishina555)やってます。フォローしてもらえるとうれしいです!RECOMMENDJavaScriptReactツイートシェアはてブ送るPocketプロフィールnishina大企業、ベンチャーと色々なところでWebエンジニアやっています。退職手続きから案件参画まで。人気の記事iPhoneの連絡先の保存がうまくできない!?原因は同期設定かも。