React Portals: breid uw gereedschapskist verder uit dan propboren

Belangrijkste leerpunten

• Met React Portals kunt u de inhoud van een component buiten de bovenliggende componenthiërarchie weergeven, waardoor deze nuttig wordt voor UI-elementen zoals modals en overlays.
• Portalen kunnen in verschillende scenario's worden gebruikt, zoals modals, integraties van derden, contextmenu's en tooltips, waardoor flexibele weergave op verschillende DOM-locaties mogelijk is.
• Door React Portals te gebruiken, kunt u UI-problemen scheiden van de hoofdcomponentenboom, de onderhoudbaarheid van de code verbeteren en eenvoudig de z-index van componenten beheren voor het in lagen aanbrengen en stapelen van UI-elementen.

Moderne webapplicaties hebben interfaces nodig met elementen als modals en tooltips. Maar deze UI-componenten integreren mogelijk niet altijd goed met de bestaande componentenstructuur.

React biedt een oplossing voor dit probleem via een functie genaamd Portals.

Wat zijn React-portals?

React Portals bieden een manier om de inhoud van een component buiten de bovenliggende componenthiërarchie weer te geven. Met andere woorden, ze stellen u in staat de uitvoer van een component weer te geven in een ander DOM-element dat geen onderliggend element is van de huidige component.

Deze functie is handig bij het omgaan met UI-componenten die op een hoger niveau in de DOM moeten worden weergegeven, zoals modals of overlays.

Gebruik voor React-portals

React Portals zijn handig in verschillende scenario's:

• Modalen en overlays. Wanneer u modale dialogen of overlays moet weergeven, rendert u deze op het hoogste niveau van de DOM. Dit zorgt ervoor dat de stijlen of lay-out van hun ouders hen niet beperken.
• Integraties van derden. Bij het integreren van bibliotheken van derden die anticiperen op weergave op specifieke DOM-locaties.
• Contextmenu's. Contextmenu's maken die reageren op gebruikersinteracties, die u moet positioneren ten opzichte van de viewport of een specifiek DOM-element.
• Tooltips en popovers. Bij het renderen van tooltips of popovers die bovenop andere componenten moeten verschijnen, ongeacht hun positie in de componentenboom.

Hoe React-portals werken

Wanneer u een component in React rendert, koppelt u traditioneel de uitvoer ervan aan het DOM-knooppunt van de bovenliggende component. Dit werkt goed voor de meeste scenario's, maar wordt beperkend als u inhoud buiten de bovenliggende hiërarchie moet weergeven.

Stel dat u een modale dialoog creëert. Standaard plaatst u de inhoud van de modal in de het DOM-knooppunt van de bovenliggende component.

Dit kan leiden tot stijlconflicten en ander onbedoeld gedrag, aangezien de inhoud van de modale versie de stijlen en beperkingen van de bovenliggende componenten overneemt.

React Portals pakken deze beperking aan door u een doel-DOM-element te laten specificeren waar de uitvoer van een component moet worden weergegeven.

Dit betekent dat u elk UI-element buiten de DOM-hiërarchie van het bovenliggende element kunt weergeven, waarbij u zich losmaakt van de beperkingen van de stijlen en lay-out van het bovenliggende element.

Hoe React-portals te gebruiken

Modals zijn een perfect voorbeeld van wanneer u React Portals zou kunnen gebruiken. In deze voorbeeldcode wordt de procedure uitgelegd.

Zet een basis React-applicatie op

Voordat u een portal maakt, moet u ervoor zorgen dat u een eenvoudige React-toepassing hebt ingesteld. Je kunt gebruiken tools zoals Create React-app om een ​​project snel in de steigers te zetten.

Creëer een portaal voor modalen

Om een ​​portal te maken, gebruikt u de ReactDOM.createPortal() functie. Er zijn twee argumenten nodig: de inhoud die u wilt weergeven, en een verwijzing naar het DOM-knooppunt waarin deze moet worden weergegeven.

In dit voorbeeld geeft de Modal-component zijn onderliggende elementen weer met behulp van een portal. De inhoud verschijnt in het DOM-element met de ID ‘root’.

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

U kunt de inhoud van een specifieke Modal in een specifiek onderdeel definiëren. Deze component ModalContent bevat bijvoorbeeld een paragraaf en een Dichtbij knop:

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

exportdefault ModalContent;

Vervolgens kunt u de Modal openen via een knopklik gedefinieerd in 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 (



Open Modal</button>
 {isModalOpen && (


 </Modal>
 )}
 </div>
 );
};
exportdefault App;

In dit voorbeeld geeft de Modal-component de inhoud weer met behulp van een portal, los van de hiërarchie van de hoofdcomponenten.

Voorbeelden uit de echte wereld

React Portals zijn nuttig in verschillende alledaagse situaties.

• Meldingssysteem: Wanneer het opzetten van een notificatiesysteem, wil je vaak berichten bovenaan het scherm, ongeacht waar het huidige onderdeel zich bevindt.
• Contextmenu: Contextmenu's moeten dichtbij de plaats verschijnen waar de gebruiker klikt, ongeacht waar dat zich in de DOM-hiërarchie bevindt.
• Integratie met derden: Bibliotheken van derden moeten zich vaak op willekeurige delen van de DOM richten.

Best practices voor portalgebruik

Volg deze tips om het maximale uit React Portals te halen:

• Selecteer de juiste cases: Portals zijn flexibel, maar niet alles heeft ze nodig. Gebruik portals wanneer reguliere weergave problemen of botsingen veroorzaakt.
• Houd portalinhoud gescheiden: Wanneer u inhoud via portals weergeeft, zorg er dan voor dat deze op zichzelf staat. Het mag niet afhankelijk zijn van bovenliggende stijlen of context.
• Beheer evenementen en acties: Bij portals werken evenementen iets anders vanwege de losse inhoud. Ga op de juiste manier om met de verspreiding en acties van gebeurtenissen.

Voordelen van React-portals

React Portals bieden verschillende voordelen die de ontwikkeling van complexe gebruikersinterfaces kunnen verbeteren. Zij:

• Help UI-problemen te scheiden van de hoofdcomponentenstructuur, waardoor de onderhoudbaarheid en leesbaarheid van de code worden verbeterd.
• Bied flexibiliteit voor componenten die buiten hun bovenliggende component moeten worden weergegeven.
• Maak het gemakkelijk om modals en overlays te maken die gescheiden zijn van de rest van de gebruikersinterface.
• Hiermee kunt u eenvoudig de z-index van componenten beheren, zodat u uw UI-elementen netjes kunt stapelen en stapelen.

Mogelijke valkuilen en overwegingen

Hoewel React Portals nuttig zijn, moet u het volgende in gedachten houden:

• CSS-problemen: Portals kunnen onverwacht gedrag in CSS-stijl veroorzaken, omdat ze inhoud buiten de bovenliggende componenten plaatsen. Gebruik globale stijlen of beheer het CSS-bereik zorgvuldig.
• Toegankelijkheid: wanneer u portals gebruikt om inhoud weer te geven, moet u er rekening mee houden dat toegankelijkheidsfuncties zoals toetsenbordnavigatie en schermlezercompatibiliteit intact blijven.
• Rendering aan de serverzijde: Portals passen mogelijk niet goed bij server-side rendering (SSR). Begrijp de effecten en beperkingen van het gebruik van portals in SSR-opstellingen.

De gebruikersinterface voorbij de norm stuwen

React Portals bieden een krachtige oplossing voor het omgaan met ingewikkelde UI-situaties waarbij inhoud buiten de grenzen van de bovenliggende componenten moet verschijnen.

Door portals te benutten en best practices te gebruiken, kunt u gebruikersinterfaces bouwen die beter aanpasbaar en gemakkelijker te onderhouden zijn, terwijl u tegelijkertijd problemen vermijdt.

Of u nu modals maakt of bibliotheken van derden binnenhaalt, React Portals bieden een krachtig antwoord voor het voldoen aan veeleisende UI-behoeften.