0Pricing
React Academy · Lekcja

Czym są React Portals?

Poznaj API createPortal i dowiedz się, dlaczego renderowanie poza głównym elementem div jest przydatne

Czym są React Portals? to bezpłatna lekcja React Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.

Witamy

W tej lekcji dowiedzą się Państwo, czym są React Portals, dlaczego przydatne jest renderowanie poza nadrzędnym drzewem DOM oraz jak używać API createPortal.

Standardowa hierarchia DOM w React

Domyślnie każdy komponent jest renderowany wewnątrz węzła DOM swojego rodzica. Cała aplikacja React zwykle znajduje się wewnątrz jednego elementu `
`. Działa to dobrze, dopóki modal, podpowiedź lub menu rozwijane nie musi wydostać się poza rodzica z `overflow: hidden`.

Czym jest portal

**Portal** pozwala renderować wynik komponentu w innym węźle DOM — takim, który znajduje się poza głównym węzłem React. Drzewo React komponentu pozostaje bez zmian; zmienia się tylko położenie w DOM.
import { createPortal } from 'react-dom';

function Modal({ children }) {
  return createPortal(
    children,
    document.body // render into body, not parent
  );
}

Dlaczego istnieją portale

Właściwości CSS, takie jak `overflow: hidden`, konteksty stosu `z-index` i `transform` ustawione na rodzicu, mogą przycinać lub ukrywać elementy potomne. Portale omijają te ograniczenia, dołączając renderowany wynik do innego węzła DOM.

Propagacja zdarzeń nadal działa

Mimo że węzeł DOM portalu znajduje się poza rodzicem, **zdarzenia React nadal propagują się w górę** przez drzewo komponentów React, a nie przez drzewo DOM. Kliknięcie wewnątrz modalnego portalu będzie propagować się do jego rodzica w React.

Tworzenie miejsca docelowego portalu

Portal można utworzyć w dowolnym istniejącym węźle DOM. Często stosuje się dedykowany element `
// index.html
<body>
  <div id="root"></div>
  <div id="modal-root"></div>
</body>

// Modal.jsx
createPortal(children, document.getElementById('modal-root'));

Cykl życia portalu jest powiązany z rodzicem w React

Portal jest montowany podczas montowania komponentu nadrzędnego i odmontowywany podczas jego odmontowania. React nadal śledzi go jako część tego samego drzewa komponentów, dlatego kontekst i referencje działają normalnie.

Kontekst działa w poprzek portali

Ponieważ portale pozostają częścią drzewa komponentów React, wartości kontekstu udostępnione nad portalem są nadal dostępne wewnątrz portalu. Położenie w DOM nie wpływa na łańcuch kontekstu React.

Używanie createPortal ze stanem

Widocznością portalu należy sterować za pomocą zmiennej stanu. Po przełączeniu jej przyciskiem zawartość portalu pojawia się w document.body, podczas gdy przycisk pozostaje na swoim zwykłym miejscu w DOM.
function App() {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <button onClick={() => setOpen(true)}>Open</button>
      {open && createPortal(
        <div className="overlay">
          <button onClick={() => setOpen(false)}>Close</button>
        </div>,
        document.body
      )}
    </div>
  );
}

Renderowanie po stronie serwera i portale

Portale wymagają istnienia węzła DOM, dlatego zawsze działają po stronie klienta. W konfiguracjach Next.js lub innych konfiguracjach SSR należy dopilnować, aby kod renderujący portal uruchamiał się wyłącznie w przeglądarce, korzystając z `useEffect` lub sprawdzenia stanu zamontowania.

Szybkie sprawdzenie

React Portals renderują zawartość w innym węźle DOM. Na który aspekt drzewa komponentów React ma to wpływ?

Podsumowanie

Portale pozwalają renderować wynik React w dowolnym węźle DOM za pomocą createPortal(). Drzewo React, kontekst i propagacja zdarzeń pozostają bez zmian. Należy używać portali do omijania ograniczeń overflow/z-index w modalach i podpowiedziach.

Następny temat

Następna lekcja: **Building a Modal Component with Portals** — zbudują Państwo w pełni wielokrotnego użytku modal, który renderuje się za pomocą portalu w document.body i zarządza stanem otwarcia oraz zamknięcia.

Często zadawane pytania

Czy lekcja „Czym są React Portals?” jest bezpłatna?

Tak — pełny tekst „Czym są React Portals?” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Czym są React Portals?”?

Poznaj API createPortal i dowiedz się, dlaczego renderowanie poza głównym elementem div jest przydatne Ćwiczysz React Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć React Academy?

Nie wymagamy żadnego doświadczenia. React Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Czym są React Portals?”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji React Academy?

Tak. Każda lekcja React Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Czym są React Portals?
  2. Budowanie komponentu modalnego za pomocą portali
  3. Obsługa fokusu i pułapek klawiatury w modalach
  4. Tooltipy i menu rozwijane za pomocą portali
← Powrót do React Academy