React-komponentit kannustavat hyviin käytäntöihin, mutta ne voivat olla liian rajoittavia. Opi murtamaan muotti.

Avaimet takeawayt

  • React-portaalien avulla voit renderöidä komponentin sisällön sen pääkomponenttihierarkian ulkopuolelle, mikä tekee siitä hyödyllisen käyttöliittymäelementeille, kuten modaaleille ja peittokuville.
  • Portaaleja voidaan käyttää erilaisissa skenaarioissa, kuten modaaleissa, kolmannen osapuolen integraatioissa, kontekstivalikoissa ja työkaluvihjeissä, mikä mahdollistaa joustavan hahmontamisen eri DOM-paikoissa.
  • React Portalsin avulla voit erottaa käyttöliittymähuolet pääkomponenttipuusta, parantaa koodin ylläpidettävyyttä ja helposti hallita komponenttien z-indeksiä käyttöliittymäelementtien kerrostamista ja pinoamista varten.

Nykyaikaiset verkkosovellukset tarvitsevat käyttöliittymiä, joissa on elementtejä, kuten modaaleja ja työkaluvihjeitä. Mutta nämä käyttöliittymäkomponentit eivät aina välttämättä integroidu hyvin olemassa olevaan komponenttirakenteeseen.

React tarjoaa ratkaisun tähän ongelmaan Portals-nimisen ominaisuuden kautta.

instagram viewer

Mitä React-portaalit ovat?

Reaktioportaalit tarjoavat tavan hahmontaa komponentin sisältö sen pääkomponenttihierarkian ulkopuolella. Toisin sanoen niiden avulla voit renderöidä komponentin tulosteen eri DOM-elementiksi, joka ei ole nykyisen komponentin ali.

Tämä ominaisuus on kätevä käsiteltäessä käyttöliittymäkomponentteja, joiden on renderöitävä korkeammalla tasolla DOM: ssa, kuten modaaleja tai peittokuvia.

React-portaalien käyttötarkoitukset

React-portaalit ovat hyödyllisiä erilaisissa skenaarioissa:

  • Modaalit ja peittokuvat. Kun haluat näyttää modaalisia dialogeja tai peittokuvia, renderöi ne DOM: n ylimmällä tasolla. Tämä varmistaa, että vanhempien tyylit tai asettelu eivät rajoita heitä.
  • Kolmannen osapuolen integraatiot. Kun integroidaan kolmannen osapuolen kirjastoja, jotka ennakoivat renderöinnin tietyissä DOM-paikoissa.
  • Kontekstivalikot. Luodaan kontekstivalikoita, jotka vastaavat käyttäjän vuorovaikutukseen ja jotka sinun on sijoitettava suhteessa näkymäporttiin tai tiettyyn DOM-elementtiin.
  • Työkaluvinkit ja ponnahdusikkunat. Kun renderöidään työkaluvihjeitä tai ponnahdusikkunoita, joiden täytyy näkyä muiden komponenttien päällä riippumatta niiden sijainnista komponenttipuussa.

Kuinka React-portaalit toimivat

Perinteisesti, kun hahmonnat komponentin Reactissa, liität sen tulosteen pääkomponentin DOM-solmuun. Tämä toimii hyvin useimmissa skenaarioissa, mutta siitä tulee rajoittava, kun sinun on renderöitävä sisältöä vanhemman hierarkian ulkopuolella.

Oletetaan, että olet luomassa modaalista dialogia. Oletuksena sijoitat modaalin sisällön sisään pääkomponentin DOM-solmu.

Tämä voi johtaa tyyliristiriitoihin ja muuhun tahattomaan toimintaan, koska modaalin sisältö perii emokomponenttien tyylit ja rajoitukset.

Reaktioportaalit korjaavat tämän rajoituksen antamalla sinun määrittää kohde-DOM-elementin, jossa komponentin lähdön tulee renderöidä.

Tämä tarkoittaa, että voit renderöidä minkä tahansa käyttöliittymäelementin ylätason DOM-hierarkian ulkopuolella ja vapautua ylätason tyylien ja asettelun rajoituksista.

React-portaalien käyttäminen

Modaalit ovat täydellinen esimerkki siitä, milloin voit käyttää React-portaaleja. Tämä esimerkkikoodi selittää menettelyn.

Perus React-sovelluksen määrittäminen

Ennen kuin luot portaalin, varmista, että React-perussovellus on määritetty. Voit käyttää työkaluja, kuten Create React App rakentaaksesi nopeasti projektin.

Luo portaali modaaleille

Luo portaali käyttämällä ReactDOM.createPortal() toiminto. Siihen tarvitaan kaksi argumenttia: sisältö, jonka haluat hahmontaa, ja viittaus DOM-solmuun sen hahmontamiseksi.

Tässä esimerkissä Modal-komponentti hahmontaa lapsensa portaalin avulla. Sisältö näkyy DOM-elementissä tunnuksella "root".

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

Voit määrittää tietyn modaalin sisällön tietyssä komponentissa. Esimerkiksi tämä ModalContent-komponentti sisältää kappaleen ja a kiinni painike:

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




exportdefault ModalContent;

Voit sitten avata Modalin App.js: ssä määritetyllä napsautuksella:

// 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;

Tässä esimerkissä Modal-komponentti renderöi sisällön pääkomponenttihierarkiasta erillään olevaa portaalia käyttämällä.

Esimerkkejä tosielämästä

React-portaalit ovat hyödyllisiä erilaisissa arjen tilanteissa.

  • Ilmoitusjärjestelmä: Milloin ilmoitusjärjestelmän luominen, haluat usein viestit näytön yläreunaan riippumatta siitä, missä nykyinen komponentti on.
  • Kontekstivalikko: Kontekstivalikoiden tulee ponnahtaa lähelle käyttäjän napsautuskohtaa riippumatta siitä, missä se on DOM-hierarkiassa.
  • Kolmannen osapuolen integrointi: Kolmannen osapuolen kirjastojen on usein kohdistettava mielivaltaisiin DOM: n osiin.

Portaalin käytön parhaat käytännöt

Saat kaiken irti React-portaaleista noudattamalla näitä vinkkejä:

  • Valitse oikeat tapaukset: Portaalit ovat joustavia, mutta kaikki ei niitä tarvitse. Käytä portaaleja, kun tavallinen renderöinti aiheuttaa ongelmia tai ristiriitoja.
  • Pidä portaalin sisältö erillään: Kun renderöit sisältöä portaalien kautta, varmista, että se on itsenäinen. Sen ei pitäisi riippua vanhempien tyyleistä tai kontekstista.
  • Hallitse tapahtumia ja toimintoja: Portaaleissa tapahtumat toimivat hieman eri tavalla irrotetun sisällön vuoksi. Käsittele tapahtumien leviämistä ja toimintoja oikein.

React-portaalien edut

React-portaalit tarjoavat useita etuja, jotka voivat tehostaa monimutkaisten käyttöliittymien kehitystä. Ne:

  • Auta erottamaan käyttöliittymäongelmat pääkomponenttipuusta, mikä parantaa koodin ylläpidettävyyttä ja luettavuutta.
  • Tarjoa joustavuutta komponenteille, jotka on näytettävä pääkomponentin ulkopuolella.
  • Helpota modaalien ja peittokuvien luomista, jotka ovat erillään muusta käyttöliittymästä.
  • Voit helposti hallita komponenttien z-indeksiä ja varmistaa, että voit kerrostaa ja pinota käyttöliittymäelementit siististi.

Mahdolliset sudenkuopat ja huomiot

Vaikka React-portaalit ovat hyödyllisiä, pidä seuraavat asiat mielessä:

  • CSS-ongelmat: Portaalit voivat aiheuttaa odottamatonta CSS-tyylistä toimintaa, koska ne sijoittavat sisällön pääkomponenttien ulkopuolelle. Käytä yleisiä tyylejä tai hallitse CSS-laajuutta huolellisesti.
  • Esteettömyys: Kun käytät portaaleja sisällön hahmontamiseen, muista säilyttää esteettömyysominaisuudet, kuten näppäimistön navigointi ja näytönlukuohjelman yhteensopivuus.
  • Palvelinpuolen renderöinti: Portaalit eivät ehkä sovi yhteen palvelinpuolen renderöinti (SSR). Ymmärrä portaalien käytön vaikutukset ja rajoitukset SSR-asetuksissa.

Propelling UI Beyond the Norm

React-portaalit tarjoavat vahvan ratkaisun monimutkaisten käyttöliittymätilanteiden käsittelemiseen, joissa sisällön tulee näkyä pääkomponenttien rajojen ulkopuolella.

Tarttua portaaleihin ja parhaiden käytäntöjen avulla voit rakentaa käyttöliittymiä, jotka ovat mukautuvampia ja helpompia ylläpitää, mutta samalla vältät ongelmia.

Suunnitteletpa modaaleja tai tuot sisään kolmannen osapuolen kirjastoja, React Portals tarjoaa tehokkaan vastauksen vaativiin käyttöliittymätarpeisiin.