React Academy · Oppitunti

Mitä React-portaalit ovat

Ymmärtäkää createPortal-rajapinta ja miksi juurielementin ulkopuolinen renderöinti on hyödyllistä.

Oppitunti 1/413 vaihetta

Mitä React-portaalit ovat on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu React Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Academy-kurssilla on yhteensä 4 oppituntia.

Tervetuloa

Tässä oppitunnissa opitte, mitä React-portaalit ovat, miksi renderöinti Reactin vanhemman DOM-puun ulkopuolelle on hyödyllistä ja miten createPortal-API:a käytetään.

Tavallinen Reactin DOM-hierarkia

Oletusarvoisesti jokainen komponentti renderöidään vanhemman DOM-solmun sisään. Koko React-sovellus sijaitsee yleensä yhdessä `

`-elementissä. Tämä toimii hyvin, kunnes modaalin, työkaluvihjeen tai pudotusvalikon täytyy päästä irti vanhemmasta, jolla on `overflow: hidden`.

Mikä portaali on

**Portaalin** avulla komponentin tuloste voidaan renderöidä toiseen DOM-solmuun — sellaiseen, joka sijaitsee React-juuren ulkopuolella. Komponentin React-puu pysyy muuttumattomana; vain DOM-sijainti muuttuu.

import { createPortal } from 'react-dom';

function Modal({ children }) {
  return createPortal(
    children,
    document.body // render into body, not parent
  );
}

Miksi portaaleja tarvitaan

Vanhemman CSS-ominaisuudet, kuten `overflow: hidden`, `z-index`-pinoamiskontekstit ja `transform`, voivat leikata lapsielementtejä tai piilottaa ne. Portaalit ohittavat nämä rajoitteet liittämällä renderöidyn tulosteen toiseen DOM-solmuun.

Tapahtumien kuplinta toimii edelleen

Vaikka portaalin DOM-solmu sijaitsee vanhemman ulkopuolella, **React-tapahtumat kuplivat edelleen** React-komponenttipuun — eivät DOM-puun — läpi. Portaalimodaalin sisällä tehty napsautus kuplii sen React-vanhemmalle.

Portaalin kohteen luominen

Voitte luoda portaalin mihin tahansa olemassa olevaan DOM-solmuun. Yleinen käytäntö on lisätä `index.html`-tiedostoon oma `

// index.html
<body>
  <div id="root"></div>
  <div id="modal-root"></div>
</body>

// Modal.jsx
createPortal(children, document.getElementById('modal-root'));

Portaalin elinkaari on sidoksissa React-vanhempaan

Portaali liitetään DOM-puuhun, kun sen vanhempi komponentti liitetään, ja poistetaan, kun vanhempi poistetaan. React käsittelee sitä edelleen saman komponenttipuun osana, joten konteksti ja ref-viitteet toimivat normaalisti.

Konteksti toimii portaaleissa

Koska portaalit pysyvät osana React-komponenttipuuta, portaalin yläpuolella annetut kontekstiarvot ovat käytettävissä myös portaalin sisällä. DOM-sijainti ei vaikuta React-kontekstin ketjuun.

createPortalin käyttö tilan kanssa

Ohjatkaa portaalin näkyvyyttä tilamuuttujalla. Vaihtakaa sen arvoa painikkeella, jolloin portaalin sisältö näkyy document.body:ssa painikkeen pysyessä normaalissa DOM-sijainnissaan.

function App() {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <button onClick={() => setOpen(true)}>Open</button>
      {open && createPortal(
        <div className="overlay">
          <button onClick={() => setOpen(false)}>Close</button>
        </div>,
        document.body
      )}
    </div>
  );
}

Palvelinpuolen renderöinti ja portaalit

Portaalit edellyttävät olemassa olevaa DOM-solmua, joten ne toimivat aina asiakaspuolella. Varmistakaa Next.js:ssä ja muissa SSR-asetuksissa, että portaalin renderöintikoodi suoritetaan vain selaimessa käyttämällä `useEffect`-hookia tai tarkistamalla, että komponentti on liitetty.

Pikatarkistus

React-portaalit renderöivät sisältöä toiseen DOM-solmuun. Mihin React-komponenttipuun osaan tämä vaikuttaa?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Portaalien avulla React-tuloste voidaan renderöidä mihin tahansa DOM-solmuun createPortal()-funktion avulla. React-puu, konteksti ja tapahtumien kuplinta eivät muutu. Käyttäkää niitä modaalien ja työkaluvihjeiden overflow- ja z-index-rajoitteiden ohittamiseen.

Seuraavaksi

Seuraava oppitunti: **Modaalikomponentin rakentaminen portaaleilla** — rakennatte täysin uudelleenkäytettävän modaalin, joka renderöidään portaalina document.body:hen avaus- ja sulkemistilan hallinnan avulla.

Aloita maksutta

Opi React tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 88
Oppitunnit: 324

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Mitä React-portaalit ovat” ilmainen?

Kyllä – oppitunnin ”Mitä React-portaalit ovat” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko React Academy-kurssin, päivitä CoddyKit PROhon. React Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Mitä React-portaalit ovat”?

Ymmärtäkää createPortal-rajapinta ja miksi juurielementin ulkopuolinen renderöinti on hyödyllistä. Harjoittelet React Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni React Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin React Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”Mitä React-portaalit ovat”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä React Academy-oppitunnilla?

Kyllä. Jokainen React Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Mitä React-portaalit ovat
Modal-komponentin rakentaminen portaaleilla
Fokuksen ja näppäimistöloukkujen käsittely modaleissa
Työkaluvihjeet ja pudotusvalikot portaaleilla

← Takaisin: React Academy