React-komponenter uppmuntrar till god praxis men de kan vara för restriktiva. Lär dig hur du bryter formen.

Viktiga takeaways

  • React Portals låter dig rendera en komponents innehåll utanför dess överordnade komponenthierarki, vilket gör det användbart för UI-element som modaler och överlagringar.
  • Portaler kan användas i olika scenarier som modaler, tredjepartsintegrationer, snabbmenyer och verktygstips, vilket möjliggör flexibel rendering på olika DOM-platser.
  • Genom att använda React Portals kan du separera UI-problem från huvudkomponentträdet, förbättra kodunderhållbarheten och enkelt kontrollera z-indexet för komponenter för skiktning och stapling av UI-element.

Moderna webbapplikationer behöver gränssnitt som innehåller element som modaler och verktygstips. Men dessa UI-komponenter kanske inte alltid integreras bra med den befintliga komponentstrukturen.

React erbjuder en lösning på detta problem genom en funktion som kallas Portals.

Vad är React Portals?

React Portals tillhandahåller ett sätt att rendera en komponents innehåll utanför dess överordnade komponenthierarki. Med andra ord låter de dig rendera en komponents utdata till ett annat DOM-element som inte är ett underordnat till den aktuella komponenten.

instagram viewer

Den här funktionen är praktisk när du hanterar UI-komponenter som behöver renderas på en högre nivå i DOM, såsom modaler eller överlagringar.

Används för React-portaler

React Portals kommer väl till pass i olika scenarier:

  • Modaler och överlägg. När du behöver visa modala dialoger eller överlagringar, rendera dem på den översta nivån av DOM. Detta säkerställer att deras förälders stilar eller layout inte begränsar dem.
  • Tredjepartsintegrationer. När man integrerar tredjepartsbibliotek som förutser rendering på specifika DOM-platser.
  • Snabbmenyer. Skapa snabbmenyer som svarar på användarinteraktioner, som du behöver placera i förhållande till viewporten eller ett specifikt DOM-element.
  • Verktygstips och popovers. När du renderar verktygstips eller popovers som måste visas ovanpå andra komponenter, oavsett deras placering i komponentträdet.

Hur React Portals fungerar

Traditionellt, när du renderar en komponent i React, kopplar du dess utdata till den överordnade komponentens DOM-nod. Detta fungerar bra för de flesta scenarier, men det blir begränsande när du behöver rendera innehåll utanför förälderns hierarki.

Anta att du skapar en modal dialog. Som standard placerar du modalens innehåll i överordnad komponents DOM-nod.

Detta kan leda till stilkonflikter och annat oavsiktligt beteende eftersom modalens innehåll ärver stilarna och begränsningarna för dess överordnade komponenter.

React Portals adresserar denna begränsning genom att låta dig ange ett mål-DOM-element där en komponents utdata ska renderas.

Detta innebär att du kan rendera vilket UI-element som helst utanför förälderns DOM-hierarki, och bryta dig loss från begränsningarna för förälderns stilar och layout.

Hur man använder React-portaler

Modals är ett perfekt exempel på när du kan använda React Portals. Denna exempelkod förklarar proceduren.

Konfigurera en Basic React-applikation

Innan du skapar en portal, se till att du har en grundläggande React-applikation inställd. Du kan använda verktyg som Create React App att snabbt bygga ett projekt.

Skapa en portal för modaler

För att skapa en portal, använd ReactDOM.createPortal() fungera. Det krävs två argument: innehållet du vill rendera och en referens till DOM-noden för att rendera det i.

I det här exemplet återger Modal-komponenten sina barn med hjälp av en portal. Innehållet kommer att visas i DOM-elementet med ID: t "root".

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

Du kan definiera innehållet i en specifik Modal i en specifik komponent. Till exempel innehåller denna ModalContent-komponent ett stycke och en Stänga knapp:

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




exportdefault ModalContent;

Du kan sedan öppna Modal via ett knappklick definierat i 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;

I det här exemplet återger Modal-komponenten sitt innehåll med hjälp av en portal, fristående från huvudkomponenthierarkin.

Exempel från verkliga världen

React Portals är användbara i olika vardagliga situationer.

  • Aviseringssystem: När skapa ett meddelandesystem, vill du ofta ha meddelanden överst på skärmen, oavsett var den aktuella komponenten är.
  • Snabbmeny: Snabbmenyer bör dyka upp nära där användaren klickar, oavsett var det är i DOM-hierarkin.
  • Tredjepartsintegration: Tredjepartsbibliotek behöver ofta rikta in sig på godtyckliga delar av DOM.

Bästa metoder för portalanvändning

För att få ut det mesta av React Portals, följ dessa tips:

  • Välj rätt fall: Portaler är flexibla, men allt behöver dem inte. Använd portaler när regelbunden rendering orsakar problem eller krockar.
  • Håll portalinnehåll åtskilt: När du renderar innehåll via portaler, se till att det är fristående. Det bör inte förlita sig på föräldrastilar eller sammanhang.
  • Hantera händelser och åtgärder: Med portaler fungerar händelser lite annorlunda på grund av det fristående innehållet. Hantera händelseutbredning och åtgärder korrekt.

Fördelar med React Portals

React Portals erbjuder flera fördelar som kan förbättra utvecklingen av komplexa användargränssnitt. De:

  • Hjälp till att skilja problem med gränssnittet från huvudkomponentträdet, förbättra kodunderhåll och läsbarhet.
  • Ge flexibilitet för komponenter som behöver visas utanför sin överordnade komponent.
  • Gör det enkelt att skapa modaler och överlägg som är separata från resten av användargränssnittet.
  • Låt dig enkelt styra komponenternas z-index, vilket säkerställer att du kan lagra och stapla dina UI-element på ett snyggt sätt.

Potentiella fallgropar och överväganden

Även om React-portaler är användbara, tänk på följande:

  • CSS-problem: Portaler kan orsaka oväntat beteende i CSS-stil eftersom de placerar innehåll utanför överordnade komponenter. Använd globala stilar eller hantera CSS-omfattning noggrant.
  • Tillgänglighet: När du använder portaler för att rendera innehåll, kom ihåg att hålla tillgänglighetsfunktioner som tangentbordsnavigering och skärmläsarkompatibilitet intakta.
  • Återgivning på serversidan: Portaler kanske inte passar ihop med server-side rendering (SSR). Förstå effekterna och begränsningarna av att använda portaler i SSR-inställningar.

Framdrivande UI Beyond the Norm

React Portals erbjuder en stark lösning för att hantera invecklade UI-situationer som kräver att innehåll visas utanför gränserna för överordnade komponenter.

Genom att förstå portaler och använda bästa praxis kan du bygga användargränssnitt som är mer anpassningsbara och lättare att underhålla, samtidigt som du undviker problem.

Oavsett om du skapar modaler eller tar in tredjepartsbibliotek ger React Portals ett kraftfullt svar för att möta krävande användargränssnittsbehov.