Portails de réaction

Découvrez comment utiliser les portails React

React 16, sorti en septembre 2017, a introduit les portails.

Un portail est un moyen de rendre un élément en dehors de sa hiérarchie de composants, dans un composant séparé.

Lorsque cet événement est rendu, les événements qui s'y déroulent sont gérés par la hiérarchie des composants React plutôt que par la hiérarchie définie par la position DOM de l'élément.

D'où le nom «portail»: un élément se trouve quelque part dans l'arborescence DOM qui se trouve en dehors de l'arborescence normale des composants React, mais l'arborescence des composants React qui l'inclut est toujours en charge.

React propose une API simple pour ce faire,ReactDOM.createPortal(), qui accepte 2 arguments. Le premier est l'élément à rendre, le second est l'élément DOM où le rendre.

Un cas d'utilisation classique pour cela est les fenêtres modales.

Un modal à rendre en plein écran doit vivre en dehors de l'élément, afin qu'il puisse être correctement stylé à l'aide de CSS.

Donc, si un modal est défini comme un composant:

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

Nous pouvons avoir un composant App le rendre, et tous les événements qui se produisent dans le composant Modal seront gérés par App même si techniquement le modal est rendu dans une arborescence DOM différente:

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

Voir l'exemple complet surhttps://codepen.io/flaviocopes/pen/KbdagX

Téléchargez mon gratuitManuel React

Portails de réaction

Découvrez comment utiliser les portails React

Plus de tutoriels de réaction: