Learn React
Describing the UI

Komponenttien importtaus ja exporttaus

Komponenttien taika perustuu niiden uudelleenkäytettävyyteen: voit luoda komponentteja, jotka koostuvat toisista komponenteista. Mutta kun upotat enemmän ja enemmän komponentteja, on usein järkevää hajottaa niitä eri tiedostoihin. Näin voit pitää tiedostot helppolukuisina ja uudelleenkäyttää komponentteja useammissa paikoissa.

Tulet oppimaan

  • Mikä juurikomponenttitiedosto on
  • Miten importata ja exportata komponentti
  • Milloin käyttää default exportteja sekä nimettyjä importteja ja exportteja
  • Miten importata ja exportata useita komponentteja yhdestä tiedostosta
  • Miten hajottaa komponentti useisiin tiedostoihin

Juurikomponenttitiedosto

Ensimmäinen komponenttisi -sivulla teit Profile komponentin sekä Gallery komponentin joka renderöi sen:

function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3As.jpg"
      alt="Katherine Johnson"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

Tässä esimerkissä nämä löytyvät juurikomponenttitiedostosta nimeltään App.js. Riippuen asennuksestasi, juurikomponenttisi saattaa olla toisessa tiedostossa. Jos käytät ohkelmistokehystä, jossa on tiedostopohjainen reititys, kuten Next.js, juurikomponenttisi on eri jokaiselle sivulle.

Komponentin exporttaus ja importtaus

Mitä jos haluat muuttaa laskeutumissivua tulevaisuudessa ja asettaa listan tiedekirjoista siihen? Tai siirtää kaikki profiilit jonnekin muualle? On järkevää siirtää Gallery ja Profile pois juurikomponentin tiedostosta. Tämä tekee niistä modulaarisempia ja uudelleenkäytettäviä muissa tiedostoissa. Voit siirtää komponentin kolmessa vaiheessa:

  1. Luo uusi JS tiedosto johon komponentin voi laittaa.
  2. Exporttaa funktiokomponenttisi tiedostosta (käyttämällä joko default tai nimettyjä exportteja).
  3. Importtaa se tiedostoon, jossa tulet käyttämään komponenttia (käyttäen vastaavaa tapaa default tai nimettyjen exporttien importtaukseen).

Tässä sekä Profile että Gallery on siirretty pois App.js tiedostosta uuteen tiedostoon nimeltään Gallery.js. Nyt voit muuttaa App.js importtaamaan Gallery komponentin Gallery.js tiedostosta:

import Gallery from './Gallery.js';

export default function App() {
  return (
    <Gallery />
  );
}

Huomaa miten tämä esimerkki jakautuu kahteen komponenttitiedostoon:

  1. Gallery.js:
    • Määrittelee Profile komponentin, jota käytetään vain tiedoston sisällä eikä sitä ole exportattu.
    • Exporttaa Gallery komponentin default exporttina.
  2. App.js:
    • Importtaa Gallery:n default importtina Gallery.js tiedostosta.
    • Exporttaa juuri App komponentin default exporttina.

Huomaa

Saatat huomata tiedostoja, jotka luopuvat .js päätteestä, kuten:

import Gallery from './Gallery';

Molemmat './Gallery.js' tai './Gallery' toimivat Reactin kanssa, kuitenkin ensin mainittu on lähempänä miten natiivit ES Moduulit toimivat.

Syväsukellus

Default exportit vai nimetyt exportit

JavaScriptissa on kaksi ensisijaista tapaa exportata arvoja: default exportit ja nimetyt exportit. Tähän mennessä esimerkit ovat käyttäneet ainoastaan default exportteja. Voit kuitenkin käyttää jompaa kumpaa tai molempia samassa tiedostossa. Tiedostossa voi olla ainoastaan yksi default exportti, mutta sillä voi olla niin monta nimettyä exporttia kuin haluat.

Default ja nimetyt exportit

Miten exporttaat komponenttisi määrää miten se täytyy importata. Saat virheen jos yrität importata default exporttia samalla tavalla kuin nimettyä exporttia! Tämän kaavion avulla voit seurata tapoja:

SyntaksiExport-lauseImport-lause
Defaultexport default function Button() {}import Button from './Button.js';
Nimettyexport function Button() {}import { Button } from './Button.js';

Kun kirjoitat default importtia, voit antaa sille minkä tahansa nimen import:n jälkeen. Esimerkiksi, voit kirjoittaa import Banana from './button.js' ja se silti tarjoaa saman default exportin. Verrattuna nimettyihin importteihin, nimen on vastattava toisiaan molemmin puolin. Siksi niitä kutsutaan nimetyiksi importeiksi!

Ihmiset usein käyttävät default exportteja jos tiedosto exporttaa ainoastaan yhden komponentin, ja käytävät nimettyjä exportteja jos se exporttaa useita kompoenntteja ja arvoja. Riippumatta siitä kumpaa koodityyliä suosit, anna aina merkityksellisiä nimiä komponenteillesi ja tiedostoille jotka pitävät niitä sisällään. Komponentin ilman nimiä, kuten export default () => {} ei suosita sillä ne tekevät virheenkorjauksesta hankalempaa.

Useiden komponenttien exporttaus ja importtaus samasta tiedostosta

Mitä jos haluat näyttää vain yhden Profile:n gallerian sijaan? Sinun täytyy exportata Profile komponentti, myös. Mutta Gallery.js tiedostossa on jo default exportti, ja sinulla ei voi olla kahta default exporttia. Voit luoda uuden tiedoston, jossa on default exportti, tai voit lisätä nimetyn exportin Profile:lle. Tiedosto voi pitää sisällään vain yhden default exportin, mutta se voi sisältää useita nimettyjä exportteja!

Huomaa

Vähentääksesi mahdollista sekaannusta default ja nimettyjen exporttien välillä, jotkin tiimit valitsevat pitäytymään yhdessä tavassa (default tai nimetty), tai välttävät niiden yhteiskäyttöä yhdessä tiedostossa. Käytä sitä mikä toimii parhaiten sinulle!

Ensiksi, exporttaa Profile tiedostosta Gallery.js käyttämällä nimettyä exporttia (ei default avainsanaa):

export function Profile() {
  // ...
}

Sitten importtaa Profile tiedostosta Gallery.js tiedostoon App.js käyttäen nimettyä importtia (aaltosulkeilla):

import { Profile } from './Gallery.js';

Lopuksi renderöi <Profile /> komponentista App:

export default function App() {
  return <Profile />;
}

Nyt Gallery.js sisältää kaksi exporttia: default Gallery exportin, sekä nimetyn Profile exportin. App.js importtaa molemmat näistä. Kokeile muokata <Profile /> lukemaan <Gallery /> tässä esimerkissä:

import Gallery from './Gallery.js';
import { Profile } from './Gallery.js';

export default function App() {
  return (
    <Profile />
  );
}

Käytät nyt nimettyjä ja default exportteja yhdessä:

  • Gallery.js:
    • Exporttaa Profile komponentin nimettynä exporttina nimeltään Profile.
    • Exporttaa Gallery komponentin default exporttina.
  • App.js:
    • Importtaa Profile:n nimettynä importtina nimeltään Profile tiedostosta Gallery.js.
    • Importtaa Gallery:n default importtina tiedostosta Gallery.js.
    • Exporttaa juuri App komponentin default exporttina.

Kertaus

Tällä sivulla opit:

  • Mikä juurikomponenttitiedosto on
  • Miten importata ja exportata komponentti
  • Milloin käyttää default exportteja sekä nimettyjä importteja ja exportteja
  • Miten exportata useita komponentteja yhdestä tiedostosta

Kokeile haasteita

Haaste 1 / 1:
Jaa komponentteja edelleen

Tällä hetkellä Gallery.js exporttaa molemmat Profile:n sekä Gallery:n, joka on hieman sekavaa.

Siirrä Profile komponentti sen omaan Profile.js tiedostoon ja sitten muuta App komponentti renderöimään molemmat <Profile /> ja <Gallery /> yksi toisensa jälkeen.

Voit käyttää joko default tai nimettyä exporttia Profile komponentille, mutta varmista, että käytät vastaavaa import-syntaksia sekä App.js että Gallery.js tiedostoissa! Voit viitata taulukkoon:

SyntaksiExport-lauseImport-lause
Defaultexport default function Button() {}import Button from './Button.js';
Nimettyexport function Button() {}import { Button } from './Button.js';
// Siirä minut Profile.js tiedostoon!
export function Profile() {
  return (
    <img
      src="https://i.imgur.com/QIrZWGIs.jpg"
      alt="Alan L. Hart"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

Kun olet saanut sen toimimaan toisella exportilla, varmista, että se toimii toisellakin tapaa.

PreviousYour First ComponentNextWriting Markup with JSX

How do you like these docs?