{"componentChunkName":"component---src-modules-datocms-post-page-page-tsx","path":"/posts/34","result":{"data":{"post":{"title":"React.jsでModal componentの実装","author":{"name":"t-hiroyoshi","images":{"r32":{"src":"https://www.datocms-assets.com/29850/1591833490-1b406218d7547166c31e7a9789eb3f46.jpg?auto=format&fm=png&h=32&mask=ellipse&w=32","srcSet":"https://www.datocms-assets.com/29850/1591833490-1b406218d7547166c31e7a9789eb3f46.jpg?auto=format&dpr=1&fm=png&h=32&mask=ellipse&w=32 1x,\nhttps://www.datocms-assets.com/29850/1591833490-1b406218d7547166c31e7a9789eb3f46.jpg?auto=format&dpr=1.5&fm=png&h=32&mask=ellipse&w=32 1.5x,\nhttps://www.datocms-assets.com/29850/1591833490-1b406218d7547166c31e7a9789eb3f46.jpg?auto=format&dpr=2&fm=png&h=32&mask=ellipse&w=32 2x,\nhttps://www.datocms-assets.com/29850/1591833490-1b406218d7547166c31e7a9789eb3f46.jpg?auto=format&dpr=3&fm=png&h=32&mask=ellipse&w=32 3x"},"r48":{"src":"https://www.datocms-assets.com/29850/1591833490-1b406218d7547166c31e7a9789eb3f46.jpg?auto=format&fm=png&h=48&mask=ellipse&w=48","srcSet":"https://www.datocms-assets.com/29850/1591833490-1b406218d7547166c31e7a9789eb3f46.jpg?auto=format&dpr=1&fm=png&h=48&mask=ellipse&w=48 1x,\nhttps://www.datocms-assets.com/29850/1591833490-1b406218d7547166c31e7a9789eb3f46.jpg?auto=format&dpr=1.5&fm=png&h=48&mask=ellipse&w=48 1.5x,\nhttps://www.datocms-assets.com/29850/1591833490-1b406218d7547166c31e7a9789eb3f46.jpg?auto=format&dpr=2&fm=png&h=48&mask=ellipse&w=48 2x,\nhttps://www.datocms-assets.com/29850/1591833490-1b406218d7547166c31e7a9789eb3f46.jpg?auto=format&dpr=3&fm=png&h=48&mask=ellipse&w=48 3x"}},"bio":"ShouldBeeの開発者。最近はディープラーニングについて勉強しています、すべて自動でテストできるように頑張ります。"},"date":"2015年9月3日","tags":["Inside-ShouldBee","React","ES6"],"category":"プログラミング","body":"\"image.png\n

こんにちは、現在ShouldBeeではReact.jsを用いたUIの開発をしています。

\n

ReactにはModalを実装した公開コンポーネントがいくつかあるのですが、React betaに対応していなかったのとアニメーション等の細かい設定を自分で設定したかったので自前で実装しました、今回はその紹介をしたいと思います！

\n

コンポーネント本体は下記のようになります。

\n

親コンポーネントのstateをisActiveとして受け取り表示、非表示を切り替えています。
\nまたモーダルを閉じるとき親コンポーネントのstateを更新する必要があるので、親コンポーネントのstate更新関数(onClose)を受け取っています。

\n

アニメーションはAnimate.cssを使用しています。

\n
\n
\njsx
\n
import React from \"react\";\nimport classNames from \"classnames\";\n\nexport default class Modal extends React.Component {\n  static propTypes = {\n    onClose: React.PropTypes.func.isRequired,\n    isActive: React.PropTypes.bool.isRequired\n  }\n\n  constructor(props) {\n    super(props);\n    this.state = {isActive: false, willClose: false};\n  }\n\n  componentWillReceiveProps(nextProps) {\n    if (nextProps.isActive) {\n      this.setState({isActive: true, willClose: false})\n    } else {\n      const self = this;\n      this.setState({willClose: true});\n      setTimeout(() => {\n        self.setState({isActive: false});\n      }, 500); // wait to animate the modal closing.\n    }\n  }\n\n  onClose() {\n    this.props.onClose();\n  }\n\n  render() {\n    const modalClasses = classNames({\n      \"animated\": true,\n      \"slideInDown\": this.state.isActive,\n      \"slideOutUp\": this.state.willClose\n    });\n\n    if (this.state.isActive) {\n      return (\n        <div>\n          <div\n            style={{\n              display: \"block\",\n              zIndex: \"8887\",\n              position: \"absolute\",\n              top: \"0\",\n              bottom: \"0\",\n              left: \"0\",\n              right: \"0\",\n              background: \"gray\",\n              opacity: \"0.7\"\n            }}\n            onClick={::this.onClose}\n          >\n          </div>\n          <div\n            className={modalClasses}\n            style={{\n              display: \"block\",\n              zIndex: \"8888\",\n              height: \"200px\",\n              width: \"300px\",\n              position: \"absolute\",\n              top: \"0\",\n              bottom: \"0\",\n              left: \"0\",\n              right: \"0\",\n              margin: \"auto\",\n              background: \"white\"\n            }}\n          >\n            <h1>Modal!!</h1>\n            <button className=\"btn\" onClick={::this.onClose}>\n              Close\n            </button>\n          </div>\n        </div>\n      );\n    } else {\n      return false;\n    }\n  }\n}\n
\n
\n

子コンポーネントが親コンポーネントのstateを直接更新するのはあまり好ましくありませんが、ビジネスロジックに直接関わるstateではないので良しとしています。

\n

このコンポーネントは下記の様に使用できます。

\n
\n
\njsx
\n
import React from \"react\";\nimport Modal from \"components/Modal\";\n\nexport default class TopPage extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {isModalActive: false};\n  }\n\n  openModal() {\n    this.setState({isModalActive: true});\n  }\n\n  closeModal() {\n    this.setState({isModalActive: false});\n  }\n\n  render() {\n    return (\n      <div>\n        <Modal isActive={this.state.isModalActive} onClose={::this.closeModal}/>\n        <button className=\"btn\" onClick={::this.openModal}>\n          Open modal\n        </button>\n      </div>\n    );\n  }\n}\n
\n
\n

{::this...}の書き方についてはこちらの記事を参考にしてください。

\n

Gistはこちらからどうぞ。

\n"}},"pageContext":{"id":"DatoCmsPost-5142969-ja","description":"こんにちは、現在ShouldBeeではReact.jsを用いたUIの開発をしています。 ReactにはModalを実装した公開コンポーネントがいくつかあるのですが、React betaに対応していなかったのとアニメーション等の細かい設定を自分で設定したかったので自前で実装しました、今回はその紹介をしたいと思います！ コンポーネント本体は下記のようになります。 親コンポーネントのstateをisActiveとして受け取り表示、非表示を切り替えています。 またモーダルを閉じるとき親コンポーネントのstateを更新する必要があるので、親コンポーネントのstate更新関数(onClose)を受け取って","toc":[],"ogpImageUrl":"https://www.datocms-assets.com/29850/1593190022-pastedimage20200627146.png?fm=png&mark64=aHR0cHM6Ly93d3cuZGF0b2Ntcy1hc3NldHMuY29tLzI5ODUwLzE1OTMxNTQ2MzYtdHJhbnNwYXJlbnQtcGl4ZWwucG5nP3c9NDAwJmg9NjQmZml0PWNyb3AmYmxlbmQ2ND1hSFIwY0hNNkx5OTNkM2N1WkdGMGIyTnRjeTFoYzNObGRITXVZMjl0THpJNU9EVXdMekUxT1RFNE16TTBPVEF0TVdJME1EWXlNVGhrTnpVME56RTJObU16TVdVM1lUazNPRGxsWWpObU5EWXVhbkJuUDIxaGMyczlaV3hzYVhCelpTWm1iVDF3Ym1jbWR6MHlOVFltYUQweU5UWSZibGVuZC1oPTY0JmJsZW5kLXg9MCZibGVuZC15PTAmYmxlbmQtbW9kZT1ub3JtYWwmbWFyazY0PWFIUjBjSE02THk5aGMzTmxkSE11YVcxbmFYZ3VibVYwTDM1MFpYaDBQM1I0ZEMxaGJHbG5iajF0YVdSa2JHVWxNa05zWldaMEpuUjRkQzFtYjI1MFBYTmhibk10YzJWeWFXWWxNa05pYjJ4a0puUjRkQzFqYjJ4dmNqMHlNakU0TVRZbWRIaDBOalE5WkVNeGIyRllTblpsVnpsNllVZHJKblI0ZEMxemFYcGxQVE13Sm1nOU5qUSZtYXJrLXg9NjQmbWFyay1hbGlnbj1taWRkbGUlMkNsZWZ0&mark-align=bottom%2Cleft&mark-x=100&mark-y=496&blend64=aHR0cHM6Ly93d3cuZGF0b2Ntcy1hc3NldHMuY29tLzI5ODUwLzE1OTMxNTQ2MzYtdHJhbnNwYXJlbnQtcGl4ZWwucG5nP3c9MTIwMCZoPTYzMCZmaXQ9Y3JvcCZtYXJrNjQ9YUhSMGNITTZMeTkzZDNjdVpHRjBiMk50Y3kxaGMzTmxkSE11WTI5dEx6STVPRFV3THpFMU9UTXhOVEE1TkRBdFkzSmhablJ6YldGdUxUQXhMbkJ1WncmbWFyay1hbGlnbj10b3AlMkNjZW50ZXImbWFyay13PTI1MCZtYXJrLXk9ODAmYmxlbmQ2ND1hSFIwY0hNNkx5OWhjM05sZEhNdWFXMW5hWGd1Ym1WMEwzNTBaWGgwUDNSNGRDMWhiR2xuYmoxdGFXUmtiR1VsTWtOalpXNTBaWEltZEhoMExXWnZiblE5YzJGdWN5MXpaWEpwWmlVeVEySnZiR1FtZEhoMExYQmhaRDB4TURBbWRIaDBMV052Ykc5eVBUSXlNVGd4TmlaMGVIUTJORDFWYlZab1dUTlJkV0Z1VUdwbllXUk9ZakpTYUdKRFFtcGlNakYzWWpJMWJHSnVWR3BuWVRkc2NuQmZiMjgwVlNaMGVIUXRjMmw2WlQwMU5TWjNQVEV5TURBbWFEMDJNekEmYmxlbmQtbW9kZT1ub3JtYWw&blend-mode=normal","otherPost":{"type":"author","title":"ES6でReact.ComponentのisMounted()が使えない問題の代替方法","slug":"/posts/46"}}}}