Moduł 9 - Zajęcia 16 - Portale

1.1 Portale

Portale umożliwiają renderowanie elementów podrzędnych w węzeł DOM, który znajduje się wewnątrz hierarchii DOM komponenta rodzica. 

            ReactDOM.createPortal(child, container);
  • Pierwszym argumentem może być poddrzewo Virtual DOM o dowolnym stopniu skomplikowania.
  • Drugi argument to węzeł DOM, w którym będzie zrenderowany pierwszy argument.

Dokumentacja portali

1.2 Sposób wykorzystania

            const PopupWindow = () => {
              return ReactDOM.createPortal(
                <div>PopupWindow with portal</div>,
                document.querySelector("#popup-root")
              );
            };

Typowy sposób wykorzystywania portali zachodzi wtedy, gdy komponent rodzic ma overflow: hidden lub z-index, przy tym konieczne jest, aby element dziecko wizualnie "wychodził" ze swojego kontenera. Na przykład okna modalne, pokazywane podpowiedzi.

Bez względu na to, że portal może znajdować się w drzewie DOM gdziekolwiek, zachowuje się jak zwyczajny React-element dziecko. Rzeczy takie jak rekwizyty czy kontekst pracują tak samo jak wcześniej, niezależnie od tego, czy element dziecko jest portalem, ponieważ portal nadal istnieje w drzewie komponentów React niezależnie od jego położenia w drzewie DOM.

Dotyczy to również pojawienia się zdarzeń. Zdarzenie utworzone wewnątrz portalu będzie rozprzestrzeniać się do przodków w drzewie React, nawet jeśli nie są oni przodkami w drzewie DOM.