Tässä artikkelissa perehdymme Reactin portaalien käsitteeseen ja katsomme, kuinka niitä voidaan käyttää käyttöliittymäkomponenttien parantamiseen.
Reactin portaalit ovat tehokas työkalu komponenttien hahmontamiseen pääkomponentin DOM-puun ulkopuolella. Ne tarjoavat tavan irrottaa komponentti sen pääkomponentista ja liittää se toiseen DOM-solmuun sen sijaan, että se olisi pääkomponentin sisällä. Tämä mahdollistaa suuremman joustavuuden ja paremman käyttöliittymän suunnittelun. Tämä voi olla hyödyllistä tietyissä tapauksissa, joissa haluat hahmontaa komponentin, joka on loogisesti tietyn komponentin ali, mutta sinun on irrotettava se fyysisesti pääkomponentistaan DOM-puussa.
Portaalien avulla voit luoda modaaleja, työkaluvihjeitä tai muita käyttöliittymäelementtejä, jotka on näytettävä muiden komponenttien päällä riippumatta niiden ylä-lapsi-suhteesta. Portaalit luodaan ReactDOM.createPortal-menetelmällä, ja niiden avulla voidaan herättää komponenttisi henkiin uusilla ja luovilla tavoilla.
Oletetaan, että sinulla voi olla modaalinen komponentti, jonka haluat hahmontaa sovelluksesi pääkomponentin ulkopuolella, jotta se näkyy muiden komponenttien päällä vanhempien ja lapsien välisestä hierarkiasta riippumatta. Portaalit tarjoavat tavan tehdä tämä luomalla uusi **juuri** DOM:iin ja liittämällä komponenttisi siihen. Annat komponentin, jonka haluat hahmontaa, ja DOM-solmun, johon haluat hahmontaa sen.
Esimerkiksi:
function Modal({ children }) {
return ReactDOM.createPortal(children, document.getElementById("modal-root"));
}
Yllä olevassa esimerkissä meillä on Modal-komponentti, joka renderöi lapsensa portaalin avulla. document.getElementById('modal-root') on DOM-solmu, jonka olemme luoneet muualle HTML-tiedostoomme (index.html), johon haluamme renderöidä modaalikomponenttimme.
Tällä tavalla voimme renderöidä modaalikomponentin sovelluksen pääkomponentin ulkopuolelle ja saada sen näkymään muiden komponenttien päällä.
DOM-solmu, jonka olemme luoneet HTML-koodiimme
<div id="modal-root"></div>
Renderöity HTML
Modal-komponentti hahmonnetaan elementiksi modal-root, joka sinun on määritettävä HTML-koodissasi:
🍀 Tuki
Harkitse meidän seuraamista ja tukemista tilaamalla kanavamme. Arvostamme suuresti tukeasi, ja se auttaa meitä jatkossakin luomaan sinulle nautittavaa sisältöä. Kiitos jo etukäteen tuestanne!
