【React×Material-ui】Modalの実装方法


Material-uiにはモーダル(ポップアップウインドウ)が用意されています。

表示だけならサンプルで動きますが実装するにあたって色々考えたのでメモ。

 

サンプル部分を見ると、トリガー(ボタン)とModalコンポーネントが同じように配置されてます。まずはApp.jsの設計を見ていつどこでModalが必要になるか考える。

Modalが共通の1つだけであればトリガーを子コンポーネントに渡してModalを使いまわしてもいいが、必要に応じてModalを配置したほうが混乱しにくい。

 

Modalは非表示の状態でもレンダリング処理が入る。

説明では表示領域はコンポーネント化して表示時のみ処理させろ書いている。

(表示部分が複雑な場合は自然とコンポーネント化するし、簡素な場合は大した負荷にならないからあまり気にする必要はない気がする)

 

なんにせよコンテント部分をコンポーネント化するならラッパーを作ってコンポーネントを渡してやれば汎用的に使える。

 

使う時は表示用コンポーネントを渡す。

 

シンプルになったような、複雑化しただけのような気もする。

リスト化した一覧をクリックして詳細を表示させるような用途では、渡すコンテントに値を渡して表示内容を都度変更するようにできる。

Material-uiは色々用意されていますが実装するには慣れと理解が必要そう。

 

追記:スマホでモーダルの後ろがスクロールされる現象があったのでその対策。


コメントを残す

メールアドレスが公開されることはありません。