Usando un Portal React 16 para hacer algo genial

React 16 está aquí, y una de las adiciones más interesantes es 'Portals'.

Los portales le permiten renderizar un poco de DOM controlado por React fuera del componente principal. Los documentos React lo explican muy bien, usando el ejemplo de un modal. Funciona bien para información sobre herramientas, también (aquí hay uno que hice anteriormente ).

Pero nada de eso es muy interesante. Hagamos algo raro …

Como todo lo que hace un portal es tomar un elemento y anexarlo a otro elemento, no está limitado a pegarlo en otro lugar del documento actual . Puede agregarlo al cuerpo en un documento diferente, tal vez un documento en una ventana completamente diferente.

A continuación tengo una página base (en el lado izquierdo) que tiene un contador y un botón carmesí, y una ventana (a la derecha) que es parte de la misma aplicación React, y también un bosque (en el fondo).

El hecho de que la ventana de la derecha sea la misma aplicación React es lo que se supone que debes estar entusiasmado.

Puedes dar mi palabra de que los números suben al unísono, o haz clic

Todo lo que ves en la imagen de arriba (excepto los árboles) está en el componente uno a continuación.

Ya has resuelto que <MyWindowPortal> es un poco especial, y todo lo que está dentro se renderizará en una ventana diferente.

Estás en lo correcto, y estoy orgulloso de ti. Específicamente, <MyWindowPortal> hace dos cosas:

  1. Abre una nueva ventana del navegador cuando se monta
  2. Crea un 'portal' y agrega props.children al cuerpo de la nueva ventana

¿No es eso lo mejor?

Estoy tan emocionado que tengo que ir a caminar.