面倒な UI だが必ず出てくるモーダル。


モーダルにURLをもたせる、モーダル内でさらに遷移が発生する..etcとなると、さらに複雑な実装に。


React & Redux で真正面からモーダルを実装してみる。


https://github.com/ANTON072/react-modal-sample/tree/master/modal

modal1.png


気に入らない箇所

  • Homeで必要なモーダルなのに、内容はモーダルコンポーネント内に記述しないとならない。
  • 「このモーダルはユニークURLを持ちたい」といった場合に、処理が複雑になってくる。汎用性に欠ける。
  • そもそもモーダルの開閉にReduxステートは必要なのか。

React の Portals


Portals

https://reactjs.org/docs/portals.html

Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

React の純粋な機能で、root の DOM 以外の箇所にコンポーネントを render できるよ。


こんなことができる

A4 Copy.png


まさにモーダルのための機能


Portals を使ってモーダルを実装してみる。


https://github.com/ANTON072/react-modal-sample/tree/master/portals

A4 Copy 2.png


メリット

  • モーダル内のコンテンツを、ベースのコンポーネントに内包することができる。Aboutページのモーダル内容はAboutコンポーネントに、など。
  • コンテンツ内でルーティングもできるので、このコンポーネントにはURLを持たせたくない、持たせたくない、などのハンドリングが簡単。
  • Reduxのステートを使わないで、コンポーネントのステートだけで実装可能

React はアップデートごとに便利な新機能が増えるので要注目。

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.