Reactポータル

Reactポータルの使用方法をご覧ください

2017年9月にリリースされたReact16は、ポータルを導入しました。

ポータルは、要素をそのコンポーネント階層の外側の別のコンポーネントにレンダリングする方法です。

そのイベントがレンダリングされると、そのイベントで発生するイベントは、要素のDOM位置によって設定された階層ではなく、Reactコンポーネント階層によって管理されます。

そのため、「ポータル」という名前が付けられました。要素は、通常のReactコンポーネントツリーの外側にあるDOMツリーのどこかにありますが、それを含むReactコンポーネントツリーは引き続き担当しています。

Reactはこれを行うための簡単なAPIを提供します。ReactDOM.createPortal()、2つの引数を受け入れます。 1つ目はレンダリングする要素で、2つ目はレンダリングするDOM要素です。

これの典型的な使用例はモーダルウィンドウです。

フルスクリーンでレンダリングするモーダルは要素の外側にある必要があるため、CSSを使用して適切にスタイルを設定できます。

したがって、モーダルがコンポーネントとして定義されている場合:

class Modal extends React.Component {
  constructor(props) {
    super(props)
    this.el = document.createElement('div')
  }

componentDidMount() { document.getElementById(‘modal’).appendChild(this.el) }

componentWillUnmount() { document.getElementById(‘modal’).removeChild(this.el) }

render() { return ReactDOM.createPortal( this.props.children, this.el ) } }

Appコンポーネントにレンダリングさせることができ、技術的にはモーダルが別のDOMツリーにレンダリングされていても、モーダルコンポーネントで発生するすべてのイベントはアプリによって処理されます。

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {showModal: false}
<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">handleShow</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">handleShow</span>.<span style="color:#a6e22e">bind</span>(<span style="color:#66d9ef">this</span>)
<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">handleHide</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">handleHide</span>.<span style="color:#a6e22e">bind</span>(<span style="color:#66d9ef">this</span>)

}

handleShow() { this.setState({showModal: true}) }

handleHide() { this.setState({showModal: false}) }

render() { const modal = this.state.showModal ? ( <Modal> <div> The modal <button onClick={this.handleHide}>Hide</button> </div> </Modal> ) : ‘’

<span style="color:#66d9ef">return</span> (
  <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span><span style="color:#f92672">&gt;</span>
    <span style="color:#a6e22e">The</span> <span style="color:#a6e22e">app</span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">button</span> <span style="color:#a6e22e">onClick</span><span style="color:#f92672">=</span>{<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">handleShow</span>}<span style="color:#f92672">&gt;</span><span style="color:#a6e22e">Show</span> <span style="color:#a6e22e">modal</span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/button&gt;</span>
    {<span style="color:#a6e22e">modal</span>}
  <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span>
)

} }

ReactDOM.render(<App />, document.getElementById(‘app’))

上の完全な例を参照してくださいhttps://codepen.io/flaviocopes/pen/KbdagX

私の無料ダウンロードReactハンドブック


その他の反応チュートリアル: