Komponenty React zachęcają do dobrych praktyk, ale mogą być zbyt restrykcyjne. Dowiedz się, jak rozbić formę.

Kluczowe dania na wynos

  • Portale React umożliwiają renderowanie zawartości komponentu poza jego nadrzędną hierarchią komponentów, dzięki czemu są przydatne w przypadku elementów interfejsu użytkownika, takich jak moduły i nakładki.
  • Portale mogą być używane w różnych scenariuszach, takich jak moduły, integracje innych firm, menu kontekstowe i podpowiedzi, umożliwiając elastyczne renderowanie w różnych lokalizacjach DOM.
  • Korzystając z portali React, możesz oddzielić problemy związane z interfejsem użytkownika od głównego drzewa komponentów, zwiększyć łatwość konserwacji kodu i łatwo kontrolować indeks Z komponentów w celu nakładania warstw i układania elementów interfejsu użytkownika.

Nowoczesne aplikacje internetowe wymagają interfejsów zawierających takie elementy, jak moduły i podpowiedzi. Jednak te komponenty interfejsu użytkownika mogą nie zawsze dobrze integrować się z istniejącą strukturą komponentów.

React oferuje rozwiązanie tego problemu poprzez funkcję o nazwie Portale.

Czym są portale React?

Portale React umożliwiają renderowanie zawartości komponentu poza nadrzędną hierarchią komponentów. Innymi słowy, umożliwiają renderowanie danych wyjściowych komponentu do innego elementu DOM, który nie jest dzieckiem bieżącego komponentu.

Ta funkcja jest przydatna, gdy mamy do czynienia z komponentami interfejsu użytkownika, które muszą być renderowane na wyższym poziomie w DOM, takimi jak moduły lub nakładki.

Zastosowania portali React

Portale React przydają się w różnych sytuacjach:

  • Modale i nakładki. Jeśli chcesz wyświetlić modalne dialogi lub nakładki, renderuj je na najwyższym poziomie DOM. Dzięki temu style i układ rodziców nie będą ich ograniczać.
  • Integracje z firmami zewnętrznymi. Podczas integracji bibliotek innych firm, które przewidują renderowanie w określonych lokalizacjach DOM.
  • Menu kontekstowe. Tworzenie menu kontekstowych reagujących na interakcje użytkownika, które należy ustawić względem rzutni lub konkretnego elementu DOM.
  • Etykietki narzędzi i wyskakujące okienka. Podczas renderowania podpowiedzi lub wyskakujących okienek, które muszą pojawiać się na innych komponentach, niezależnie od ich położenia w drzewie komponentów.

Jak działają portale React

Tradycyjnie, gdy renderujesz komponent w React, dołączasz jego dane wyjściowe do węzła DOM komponentu nadrzędnego. Działa to dobrze w większości scenariuszy, ale staje się ograniczające, gdy trzeba renderować zawartość poza hierarchią nadrzędną.

Załóżmy, że tworzysz dialog modalny. Domyślnie zawartość modalu zostanie umieszczona w pliku węzeł DOM komponentu nadrzędnego.

Może to prowadzić do konfliktów stylów i innych niezamierzonych zachowań, ponieważ zawartość modalu dziedziczy style i ograniczenia swoich komponentów nadrzędnych.

Portale React rozwiązują to ograniczenie, umożliwiając określenie docelowego elementu DOM, w którym powinny być renderowane dane wyjściowe komponentu.

Oznacza to, że możesz renderować dowolny element interfejsu użytkownika poza hierarchią DOM elementu nadrzędnego, uwalniając się od ograniczeń stylów i układu elementu nadrzędnego.

Jak korzystać z portali React

Moduły modalne są doskonałym przykładem sytuacji, w których można używać portali React. Ten przykładowy kod wyjaśnia procedurę.

Skonfiguruj podstawową aplikację React

Przed utworzeniem portalu upewnij się, że masz skonfigurowaną podstawową aplikację React. Możesz użyć narzędzia takie jak Utwórz aplikację React aby szybko rusztować projekt.

Utwórz portal dla modów

Aby utworzyć portal, użyj ReagujDOM.createPortal() funkcjonować. Pobiera dwa argumenty: treść, którą chcesz wyrenderować, oraz odwołanie do węzła DOM, w którym chcesz ją wyrenderować.

W tym przykładzie komponent Modal renderuje swoje elementy podrzędne przy użyciu portalu. Treść pojawi się w elemencie DOM z identyfikatorem „root”.

// Modal.js
import ReactDOM from"react-dom";
const Modal = ({ children }) => {
const modalRoot = document.getElementById("root");
return ReactDOM.createPortal(children, modalRoot);
};
exportdefault Modal;

Możesz zdefiniować zawartość konkretnego modalu w konkretnym komponencie. Na przykład ten komponent ModalContent zawiera akapit i a Zamknąć przycisk:

// Create a Modal Content Component
const ModalContent = ({ onClose }) => (
"modal">
"modal-content">
This is a modal content.</p>




exportdefault ModalContent;

Następnie możesz otworzyć Modal za pomocą kliknięcia przycisku zdefiniowanego w App.js:

// Usage in App component
import { useState } from"react";
import Modal from"./Modal";
import ModalContent from"./ModalContent";
import"./App.css";
const App = () => {
const [isModalOpen, setIsModalOpen] = useState(false);


const toggleModal = () => {
 setIsModalOpen(!isModalOpen);
 };


return (






exportdefault App;

W tym przykładzie komponent Modal renderuje swoją zawartość za pomocą portalu odłączonego od głównej hierarchii komponentów.

Przykłady ze świata rzeczywistego

Portale React są przydatne w różnych codziennych sytuacjach.

  • System powiadomień: Kiedy stworzenie systemu powiadomień, często chcesz, aby wiadomości były wyświetlane na górze ekranu, niezależnie od tego, gdzie znajduje się bieżący komponent.
  • Menu kontekstowe: menu kontekstowe powinny pojawiać się blisko miejsca kliknięcia użytkownika, niezależnie od tego, gdzie się ono znajduje w hierarchii DOM.
  • Integracja z innymi firmami: Biblioteki innych firm często muszą skupiać się na dowolnych częściach DOM.

Najlepsze praktyki dotyczące korzystania z portalu

Aby jak najlepiej wykorzystać portale React, postępuj zgodnie z poniższymi wskazówkami:

  • Wybierz odpowiednie przypadki: Portale są elastyczne, ale nie wszystko ich potrzebuje. Korzystaj z portali, gdy regularne renderowanie powoduje problemy lub konflikty.
  • Trzymaj zawartość portalu oddzielnie: renderując zawartość za pośrednictwem portali, upewnij się, że jest ona samodzielna. Nie powinien polegać na stylach ani kontekście nadrzędnym.
  • Zarządzaj wydarzeniami i akcjami: w portalach zdarzenia działają nieco inaczej ze względu na oddzielną treść. Prawidłowo obsługuj propagację zdarzeń i działania.

Korzyści z portali React

Portale React oferują kilka korzyści, które mogą usprawnić rozwój złożonych interfejsów użytkownika. Oni:

  • Pomóż oddzielić problemy związane z interfejsem użytkownika od głównego drzewa komponentów, poprawiając łatwość konserwacji i czytelność kodu.
  • Zapewnij elastyczność komponentom, które muszą być wyświetlane poza komponentem nadrzędnym.
  • Ułatw tworzenie modułów modalnych i nakładek oddzielonych od reszty interfejsu użytkownika.
  • Pozwala łatwo kontrolować indeks Z komponentów, zapewniając schludne układanie i układanie elementów interfejsu użytkownika.

Potencjalne pułapki i rozważania

Choć portale React są pomocne, należy pamiętać o następujących kwestiach:

  • Problemy z CSS: Portale mogą powodować nieoczekiwane zachowanie stylu CSS, ponieważ umieszczają treść poza komponentami nadrzędnymi. Używaj stylów globalnych lub ostrożnie zarządzaj zakresem CSS.
  • Dostępność: gdy używasz portali do renderowania treści, pamiętaj, aby zachować nienaruszone funkcje ułatwień dostępu, takie jak nawigacja za pomocą klawiatury i zgodność z czytnikiem ekranu.
  • Renderowanie po stronie serwera: Portale mogą nie współpracować dobrze renderowanie po stronie serwera (SSR). Zrozumienie skutków i ograniczeń korzystania z portali w konfiguracjach SSR.

Napędzanie interfejsu użytkownika poza normę

Portale React oferują mocne rozwiązanie do obsługi skomplikowanych sytuacji interfejsu użytkownika, które wymagają, aby treść pojawiała się poza ograniczeniami komponentów nadrzędnych.

Opanowując portale i stosując najlepsze praktyki, możesz tworzyć interfejsy użytkownika, które są bardziej elastyczne i łatwiejsze w utrzymaniu, a wszystko to przy jednoczesnym uniknięciu problemów.

Niezależnie od tego, czy tworzysz moduły, czy korzystasz z bibliotek stron trzecich, portale React zapewniają potężną odpowiedź na wymagające potrzeby interfejsu użytkownika.