【React】react-modalの簡単実装するための9つの手順とハマりポイント

業務でmodalを実装したのですが、ハマったところがありました。
で、それにまつわる記事がなかったので書きます

チュートリアル

作るモーダルは
これ

githubにReact-Sampleとしておいています。ここ
他のサンプルと混在していて見にくいですが。。

作り方
1. npm i -D react-modal
プロジェクトのnode_modulesにインストールしてください

2. 親コンポーネントでreact-modalを読み込む
ここ

[code language="javascript"]
import Modal from 'react-modal';
[/code]

3 トリガーになるidを付与、button設置
※WPエディタがhtmlタグと認識してしまうので画像で表示しています
ここ

[code language="javascript"]

<h2 id="modal">react-modal</h2>

<button className="btn btn-primary" onClick={this.openModal}>open modal</button>
<Modal><button onClick={this.closeModal}>Close<button></Modal>
[/code]

//ここでのcloseボタンの位置に注意してください。ここで更に下、子コンポーネントにthis.closeModalを渡すことはできません

4 stateを管理(初期はOpenではないのでfalse)
ここ

[code language="javascript"]
this.state = {
modalIsOpen: false
}
[/code]

5 constructorでbind
ここ

[code language="javascript"]
this.openModal = this.openModal.bind(this);
this.closeModal = this.closeModal.bind(this);
[/code]

6 this.openModalとthis.closeModalを実装
//setStateでbooleanを渡すだけ
ここ

[code language="javascript"]
openModal() {
this.setState({modalIsOpen: true});
}

closeModal() {
this.setState({modalIsOpen: false});
}
[/code]

7.Modalのpropに設定を渡す
ここ

[code language="javascript"]
<Modal isOpen={this.state.modalIsOpen} onAfterOpen={this.afterOpenModal} onRequestClose={this.closeModal} shouldCloseOnOverlayClick={true} style={customStyles}>
//ここで最低限必要なのはisOpenだけです。
//あとはご自由に
[/code]

7_2　スタイルをカスタムしたい場合styleにcustomStyleを渡す
//render内です。
ここら辺

[code language="javascript"]
const customStyles = {
overlay : {//ovelayの色を変える
background: 'rgba(0,0,0, .4)'
},
content : {
top : '50%',
left : '50%',
right : 'auto',
bottom : 'auto',
marginRight : '-50%',
transform : 'translate(-50%, -50%)',
width : '72%'//openしているコンテンツの幅を変える
}
};
[/code]

8、モーダルを実装しているコンポーネントのclassより外に下記
ここらへん

[code language="javascript"]
const appElement = document.getElementById('content');
Modal.setAppElement(appElement);
[/code]

わかりずらかったらチュートリアルのここ見てね

9 おしまい
おしまいです。どうでしょうか？？

はまりポイント
ハマったところは
3の閉じるボタンの位置でした。。
これはModalコンポーネントの直下に置かなくてはならず、、これをModalコンポーネントの子コンポーネントの中で使うことが
できませんでした。
子コンポーネントにpropsで渡しているんですけどいけなかった。
子コンポーネントではいろいろなボタンがあり、そのボタンの状態を管理して、「今の状態でcloseする 」ということが
したかったのですが、そこにはcloseModalは実装できず、

ここにもかいてある「subComponentは持てない」って。

ではModal直下にcloseを置くといろいろなボタンの状態を変えるとモーダル下のrenderが走ってしまう。
(それはshouldComponentUpdateで制御しなくてはだめ)
でした。

また
closeModal内で他の関数を呼べなかった気がする。。これは多くの時間を割いて調査していませんが、、
わかっちゃえば簡単なのですが、地味にやられました。

でわ〜〜〜

【 併せて読みたい 】

【React】Reactの動きを理解したい人の為の最小サンプル

【REACT入門】過去のREACT初心者の自分にREACTのPROPSとSTATEの違いを簡単に説明してあげたい

【REACT × ES6 × FLUX】を手っ取り早く学びたい人の為にサンプル作ったよ【3の倍数と3が付くときだけ猫になるCOUNTER】

REACT × FLUX × ES6 [WIP]LINE風チャット

他のReact記事

フロントエンド記事