Tietojen välitys komponentille

Seuraavaksi tutustumme siihen, miten tietoja voidaan välittää React-komponentille ja miten välitettyjä tietoja voidaan hyödyntää.

1. Luo components-kansioon uusi Balance.jsx -niminen tiedosto ja liitä sen sisällöksi seuraava ohjelmakoodi.

   function Balance(props) {
   
     // Poimitaan komponentille välitetty total-arvo
     const total = props.total;
   
     return (
       <div className="balance">
         <div>lemons</div>
         <div className="balance_total">{total}</div>
       </div>
     );
   
   }
   
   export default Balance;
   

   Tämä koodi on rakenteeltaan samankaltainen edellä lisätyn Lemon-komponentin kanssa. Keskeisin ero on se, että funktiolla on props-niminen parametri. Tämä on erityismuuttuja, johon React kerää kaikki komponentin kutsun yhteydessä välitetyt arvot.

   Esimerkiksi jos komponenttia kutsutaan <Balance total="42" />, niin props-muuttujasta löytyy total-niminen avain ja sen arvona teksti 42. Vastaavasti jos komponenttia kutsutaan <Balance kind="neutral">, niin props-muuttujasta löytyy kind-niminen avain arvolla neutral.

   Tätä toiminnallisuutta hyödynnetään funktiokoodissa ennen return-lausetta, jossa haetaan komponentille total-määritteellä välitetty tieto. Tämä arvo tallennetaan vakioon, joka tulostetaan return-lauseen sisällä. Muuttujan arvo tulostetaan JSX-koodissa sijoittamalla muuttujan nimi aaltosulkeiden sisälle, kuten esimerkiksi {total}.

2. Muokkaa src-kansiossa olevaa App.jsx-tiedostoa. Lisää tiedoston alkuun seuraava ohjelmarivi.

   import Balance from './components/Balance';
   

   import-rivien järjestyksellä ei ole merkitystä, mutta nekin kannattaa järjestää jonkin logiikan perusteella. Tässä projektissa komponentit tuodaan aakkosjärjestyksessä ja niiden jälkeen muut sisällöt.

   Muuta komponentin return-lause seuraavan kaltaiseksi:

     return (
       <>
         <div>
           <Balance total="157" />
           <Lemon />
         </div>  
       </>
     )
   

   Edellä kutsutaan Balance-komponenttia ja sille välitetään kutsun yhteydessä arvo 157.

3. Avaa sovellus selaimessa. Nyt sitruunan yläpuolelle on ilmestynyt lemons-teksti ja sen alapuolelle luku. Voit testata komponentin toimintaan vaihtamalla total-määritteen arvoa App.jsx -komponentissa.

   
   
   

   Jos tutkit tarkemmin Balance-komponentin lähdekoodia, niin huomaat, että uloimmassa div-elementti on määritelty kuuluvan luokkaan balance ja sisemmässä on luokkamääritteenä balance_total. Tässä noudatetaan löyhästi BEM-nimeämiskäytäntöä, jossa nimen ensimmäinen osa määrittelee kokonaisuuden (block), toinen osa elementin kokonaisuuden sisällä (element). Nimelle on mahdollista määritellä myös kolmaskin osa (modifier), mutta tähän palaamme projektin myöhemmässä vaiheessa.

   Tässä projektissa kokonaisuus (block) on käytännössä sama kuin komponentin nimi (mutta pienillä kirjaimilla kirjoitettuna) eli Balance-komponentin luokka on balance. Komponentin sisällä olevia asioita on määritelty lisänimellä, kuten esimerkiksi balance_total. Tällä tavalla luokkatunnisteesta pystyy suoraan päättelemään, mille komponentille se kuuluu.

Muutosten vienti versiohallintaan

Viedään viimeisimmät muutokset versiohallintaan.

git add .
git commit -m "lisää Balance-komponentin"

Toteutushaaste 1

Seuraavaksi toteutamme Booster-komponentin aivan samalla periaatteella kuin edellä toteutetun Balance-komponentin.

Ennen kuin siirryt seuraavaan osioon, niin kokeile toteuttaa Booster-niminen komponentti, joka saa kutsun yhteydessä value-määritteellä arvon. Komponentin tyylimääritykset löytyvät booster-luokan alta.

Mallin Booster-luokan tulostamasta tekstistä löydät Funktiokomponentti-sivulta.

lisää Balance-komponentin -commit