Komponenty React podporují osvědčené postupy, ale mohou být příliš omezující. Naučte se, jak rozbít formu.

Klíčové věci

  • Portály React vám umožňují vykreslit obsah komponenty mimo hierarchii nadřazené komponenty, což je užitečné pro prvky uživatelského rozhraní, jako jsou modály a překryvy.
  • Portály lze použít v různých scénářích, jako jsou modály, integrace třetích stran, kontextové nabídky a popisky nástrojů, což umožňuje flexibilní vykreslování v různých umístěních DOM.
  • Pomocí portálů React můžete oddělit problémy uživatelského rozhraní od stromu hlavních komponent, zlepšit údržbu kódu a snadno ovládat z-index komponent pro vrstvení a skládání prvků uživatelského rozhraní.

Moderní webové aplikace potřebují rozhraní, která obsahují prvky, jako jsou modály a popisky. Tyto komponenty uživatelského rozhraní se však nemusí vždy dobře integrovat se stávající strukturou komponent.

React nabízí řešení tohoto problému prostřednictvím funkce zvané Portály.

Co jsou portály React?

Portály React poskytují způsob, jak vykreslit obsah komponenty mimo hierarchii nadřazené komponenty. Jinými slovy, umožňují vám vykreslit výstup komponenty do jiného prvku DOM, který není potomkem aktuální komponenty.

instagram viewer

Tato funkce je užitečná při práci s komponentami uživatelského rozhraní, které potřebují vykreslit na vyšší úrovni v DOM, jako jsou modály nebo překryvy.

Používá se pro portály React

Portály React se hodí v různých scénářích:

  • Modály a překryvy. Když potřebujete zobrazit modální dialogy nebo překryvy, vykreslete je na nejvyšší úrovni modelu DOM. To zajišťuje, že styly nebo rozvržení jejich rodičů je neomezí.
  • Integrace třetích stran. Při integraci knihoven třetích stran, které předpokládají vykreslování na konkrétních umístěních DOM.
  • Kontextové nabídky. Vytváření kontextových nabídek, které reagují na interakce uživatele, které musíte umístit vzhledem k výřezu nebo konkrétnímu prvku DOM.
  • Popisky a vyskakovací okna. Při vykreslování popisků nástrojů nebo vyskakovacích oken, které se musí objevit nad ostatními komponentami, bez ohledu na jejich pozici ve stromu komponent.

Jak fungují portály React

Tradičně, když vykreslujete komponentu v Reactu, připojíte její výstup k uzlu DOM nadřazené komponenty. To funguje dobře pro většinu scénářů, ale omezuje to, když potřebujete vykreslit obsah mimo nadřazenou hierarchii.

Předpokládejme, že vytváříte modální dialog. Ve výchozím nastavení umístíte obsah modalu do uzel DOM nadřazené komponenty.

To může vést ke konfliktům stylů a jinému nezamýšlenému chování, protože obsah modálu zdědí styly a omezení svých nadřazených komponent.

Portály React řeší toto omezení tím, že vám umožňují zadat cílový prvek DOM, kde by se měl vykreslit výstup komponenty.

To znamená, že můžete vykreslit jakýkoli prvek uživatelského rozhraní mimo hierarchii DOM rodiče, čímž se oprostíte od omezení stylů a rozvržení rodiče.

Jak používat portály React

Modály jsou dokonalým příkladem toho, kdy můžete používat portály React. Tento ukázkový kód vysvětluje postup.

Nastavte základní aplikaci React

Před vytvořením portálu se ujistěte, že máte nastavenou základní aplikaci React. Můžeš použít nástroje jako Create React App k rychlému lešení projektu.

Vytvořte portál pro modals

Chcete-li vytvořit portál, použijte ReactDOM.createPortal() funkce. Vyžaduje dva argumenty: obsah, který chcete vykreslit, a odkaz na uzel DOM, ve kterém jej vykreslíte.

V tomto příkladu komponenta Modal vykresluje své potomky pomocí portálu. Obsah se objeví v prvku DOM s ID ‚root‘.

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

Můžete definovat obsah konkrétního modalu v konkrétní komponentě. Například tato komponenta ModalContent obsahuje odstavec a a Zavřít knoflík:

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




exportdefault ModalContent;

Modal pak můžete otevřít kliknutím na tlačítko definované v 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;

V tomto příkladu komponenta Modal vykresluje svůj obsah pomocí portálu, který je oddělen od hierarchie hlavní komponenty.

Příklady ze skutečného světa

Portály React jsou užitečné v různých každodenních situacích.

  • Systém upozornění: Kdy vytvoření notifikačního systému, často chcete zprávy v horní části obrazovky, bez ohledu na to, kde je aktuální komponenta.
  • Kontextová nabídka: Kontextové nabídky by se měly objevovat blízko místa, kde uživatel klikne, bez ohledu na to, kde se v hierarchii modelu DOM nachází.
  • Integrace třetích stran: Knihovny třetích stran často potřebují cílit na libovolné části DOM.

Doporučené postupy pro používání portálu

Chcete-li využít portály React na maximum, postupujte podle těchto tipů:

  • Vyberte správná pouzdra: Portály jsou flexibilní, ale ne všechno je potřebuje. Používejte portály, když běžné vykreslování způsobuje problémy nebo kolize.
  • Udržujte obsah portálu oddělený: Když vykreslujete obsah prostřednictvím portálů, ujistěte se, že je samostatný. Nemělo by se spoléhat na nadřazené styly nebo kontext.
  • Správa událostí a akcí: U portálů fungují události trochu jinak kvůli oddělenému obsahu. Zacházejte s šířením událostí a akcemi správně.

Výhody React portálů

Portály React nabízejí několik výhod, které mohou zlepšit vývoj komplexních uživatelských rozhraní. Ony:

  • Pomozte oddělit problémy uživatelského rozhraní od stromu hlavních komponent a zlepšit tak udržovatelnost a čitelnost kódu.
  • Poskytněte flexibilitu pro komponenty, které se potřebují zobrazovat mimo svou nadřazenou komponentu.
  • Usnadněte si vytváření modálů a překryvů, které jsou oddělené od zbytku uživatelského rozhraní.
  • Umožní vám snadno ovládat z-index komponent a zajistit, že můžete své prvky uživatelského rozhraní úhledně vrstvit a skládat na sebe.

Možná úskalí a úvahy

I když jsou portály React užitečné, mějte na paměti tyto věci:

  • Problémy s CSS: Portály mohou způsobit neočekávané chování stylu CSS, protože umístí obsah mimo nadřazené komponenty. Používejte globální styly nebo pečlivě spravujte rozsah CSS.
  • Usnadnění: Když k vykreslování obsahu používáte portály, nezapomeňte zachovat funkce usnadnění, jako je navigace pomocí klávesnice a kompatibilita čtečky obrazovky.
  • Vykreslování na straně serveru: Portály se s nimi nemusí dobře propojit vykreslování na straně serveru (SSR). Pochopte účinky a omezení používání portálů v nastaveních SSR.

Propeling UI Beyond the Norm

Portály React nabízejí silné řešení pro řešení složitých situací uživatelského rozhraní, které vyžadují, aby se obsah objevil za hranicemi nadřazených komponent.

Uchopením portálů a používáním osvědčených postupů můžete vytvářet uživatelská rozhraní, která jsou přizpůsobivější a snadněji se udržují, a to vše a přitom se vyhnout problémům.

Ať už vytváříte modály nebo přinášíte knihovny třetích stran, portály React poskytují účinnou odpověď na řešení náročných potřeb uživatelského rozhraní.