Reaction portal

Learn how to use React Portal

Portal was introduced in React 16, released in September 2017.

A portal is a way to present elements outside of its component hierarchy in a single component.

When the event is presented, the event that occurs on it is managed by the React component hierarchy, not by the hierarchy set by the element's DOM location.

Therefore, it is named "portal": an element is located in the DOM tree somewhere outside the normal React component tree, but the React component tree that contains it is still responsible for it.

React provides a simple API to do this,ReactDOM.createPortal(), It accepts 2 parameters. The first is the element to be rendered, and the second is the DOM element where to render.

A typical use case is modal windows.

The full-screen rendered modal must be outside the element, so you can use CSS to style it appropriately.

Therefore, if the modal is defined as a component:

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 ) } }

We can let an App component render it, and all events that occur in the Modal component will be handled by the App, even if technically speaking, the mode is presented in a different DOM tree:

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’))

See complete examplehttps://codepen.io/flaviocopes/pen/KbdagX

Download mine for freeResponse Handbook


More response tutorials: