Comment utiliser ReactDOM.createPortal() à Réagir 16?

Je suis l'aide de Réagir 16 et besoin de portails, mais je ne suis pas en mesure de trouver toute la documentation sur cette fonctionnalité. Quelqu'un sait-il comment utiliser ce encore?

https://github.com/facebook/react/pull/10675

Merci pour tous les conseils.

facebook.github.io/react/docs/portals.html
Les docs très clairement expliquer comment les utiliser... avez-vous lu?
Ouais, Docs sont assez bon maintenant :). Mais l'OP posé la question il ya 2 jours. Réagir v16 n'a pas été libéré ensuite. Il a été publié aujourd'hui et docs ont également été mis à disposition aujourd'hui.
Bon, alors on peut supprimer cette question qui n'est plus nécessaire.
Je dirais, que cette question soit là depuis la réponse par @HardikModha insiste sur le rôle important que peut être ignoré lors de la lecture de la documentation.

OriginalL'auteur Slbox | 2017-09-24

  1. 26

    Réagir v16 vient de sortir il y a quelques heures (Yay!!) qui prend en charge officiellement Portail.

    Ce qui est du Portail? Depuis Combien de temps est-il là?

    Portails de fournir une première classe de façon à rendre les enfants dans un nœud DOM qui existe en dehors de la hiérarchie DOM du composant parent.

    Portal n'est pas nouveau concept dans la réagir la communauté. De nombreuses bibliothèques sont disponibles qui prend en charge ce type de fonctionnalité. e.g réagir-portail et réagir de la passerelle.

    Ce qui se passe lors du rendu de toute réagir app?

    Généralement, au moment de rendre toute Réagir application, un seul élément du DOM est utilisé pour rendre l'ensemble de Réagir arbre.

    class HelloReact extends React.Component {
   render() {
       return (
          <h1>Hello React</h1>
       );
   }
}

ReactDOM.render(<HelloReact />, document.getElementById('root'));

    Comme vous pouvez le voir nous sommes rendu notre réagir composant dans un DOM élément ayant pour id root.

    Ce qui est du Portail et pourquoi est-il nécessaire? Pourquoi est-il là?

    Portails sont un moyen de rendre Réagir les enfants à l'extérieur de la principale DOM hiérarchie du composant parent sans perdre de réagir contexte. Je suis en mettant l'accent sur parce que très bibliothèques populaires comme réagir-routeur, redux lourdement utilise la réagir contexte. Afin contexte de disponibilité lors de l'utilisation de Portal est très utile.

    Que par la réagir docs,

    Un cas d'utilisation typique pour les portails, c'est quand un composant parent a un overflow: hidden ou z-index de style, mais vous avez besoin de l'enfant " visuellement "sortir" de son conteneur. Par exemple, les dialogues, hovercards, et l'info-bulle.

    Donc, avec des portails, vous pouvez rendre un parallèle réagir un arbre sur un autre nœud DOM en cas de besoin. Même s'il est rendu dans les différents nœuds du DOM, composant parent peut prendre de l'uncaught événements. Voir ce codepen fournies dans la documentation elle-même.

    L'exemple ci-dessous devrait donner plus d'idée:

    //index.html
<html>
    <body>
        <div id="root"></div>
        <div id="another-root"></div>
    </body>
</html>

//index.jsx
const mainContainer = document.getElementById('root');
const portalContainer = document.getElementById('another-root');

class HelloFromPortal extends React.Component {
    render() {
         return (
           <h1>I am rendered through a Portal.</h1>
         );
    }
}

class HelloReact extends React.Component {
    render() {
        return (
             <div>
                 <h1>Hello World</h1>
                 { ReactDOM.createPortal(<HelloFromPortal />, portalContainer) }
             </div>
        );
    }
}

ReactDOM.render(<HelloReact />, mainContainer);

    https://codesandbox.io/s/62rvxkonnw

    Vous pouvez utiliser devtools inspecter l'élément et de voir que <h1>I am rendered through a Portal.</h1> est rendu à l'intérieur #another-root balise, tandis que <h1>Hello World</h1> est rendu à l'intérieur #root tag.

    Espère que cela aide 🙂

    Mise à jour: pour répondre À @PhillipMunin commentaire.

    Quelle est la différence entre ReactDOM.render et
    ReactDOM.createPortal?

    1. Même si le composant rendus par le biais du portail est rendu à un autre endroit à l'Extérieur du conteneur actuel de la racine), il reste présent comme l'enfant de la même composant parent. (Qui a invoqué l' ReactDOM.createPortal) de Sorte que toute les événements de l'enfant sont propagées à la société mère. (Bce, Cela ne fonctionne pas si vous arrêtez manuellement la propagation de l'événement.)

    2. Même contexte est accessible à l'intérieur de la composante rendus à travers un portail. Mais pas dans le cas où nous ne ReactDOM.render directement.

    J'ai créé une autre démo pour illustrer mon point. https://codesandbox.io/s/42x771ykwx

    Comment est-ce différent d'écrire { ReactDOM.render(<HelloFromPortal />, portalContainer) } au lieu de {ReactDOM.createPortal(...)}? Je l'ai testé en codesandbox - ne semble pas en être autrement: codesandbox.io/s/88p7lwn3l
    Outre le contexte d'être enregistré dans les portails, les événements se propager. Essayez d'ajouter un écouteur de clics dans le premier div de <HelloReact>, et de voir que lors de l'utilisation de render clics de <HelloFromPortal> ne se propagent pas. Lors de l'utilisation de createPortal, les clics provenant de l'intérieur du portail propager jusqu'à le composant parent.
    Qu'en est ReactDOM.unstable_renderSubtreeIntoContainer au lieu de rendu? il doit passer le contexte, ce n'est pas sûr de l'événement
    Dan n'est pas recommandé. twitter.com/dan_abramov/status/774591126602911746
    J'ai mis à jour ma réponse pour répondre à votre commentaire.

    OriginalL'auteur Hardik Modha

  2. 0

    Portails sont créés par l'appel de la createPortal méthode à l'intérieur de la render méthode de votre composant.

    render() {
  return (
    <div>
      {ReactDOM.createPortal(this.renderPortal(), this.props.portalEl)}
    </div>
  )
}

    renderPortal doit retourner le contenu pour être rendu à l'intérieur du portail, tandis que portalEl est un externe de l'élément DOM qui va recevoir le contenu.

    Quelqu'un a récemment twitté cette info sur les portails peuvent être trouvés dans Réagir tests.

    OriginalL'auteur Marko