Gördülő komponensek és a children – ReactJS gyorstalpaló 8.

A children a komponenseknek egyhasznos objektuma a React világában. Méghozzá az olyan komponenseknek, aminek van nyitó és záró tagja, azaz:

<Komponens>És ez itt a children kérem szépen!</Komponens>

A gördülő komponensek nemes egyszerűséggel azt jelentik, hogy egy scrollbar-t fogunk adni a komponenshez.

Görgethető komponensek

Egyelőre hagyjuk játszani a gyerekeket (gyerekek = children – elnézést a jó kis informatikus humorért, de nem állhattam meg :)) és előtte nézzük meg miként lehet a komponenseket görgethetővé tenni.

Na de miért is van erre szükségünk?

Nos, mobil nézetben például meglehetősen nehézkes a keresés, mert ha sok a megjelenítendő tétel (terminátorok), akkor a komponenseknek egy hosszú, függőleges listáját látjuk, de a cím és a kereső doboz valahol az oldal tetején van és nem látszik. 

Ez orvosolható lenne CSS-el is, de ha már itt a React, akkor miért ne? 

Lássunk neki!

Az App.js az, ahol megjelenítjük a címet, a keresődobozt és a Terminátorok listáját:

return (
      <div className="tc">
        <h1 className="f1">Terminator modellek</h1>
        <SearchBox searchChange={this.onSearchChange} />
        <TerminatorList models={filteredModels} />
      </div>
 )

A TerminatorList komponens az, amivel kellene valamit kezdeni. Mi lenne, ha ezt az egész egységet tennék görgethetővé?

Scroll komponens

Csinálok egy Scroll elnevezésű komponenst, ami valahogy így fog kinézni:

<Scroll>
     <TerminatorList models={filteredModels} />
</Scroll>

Ez a Scroll komponens ad majd egy függőlegesen görgető sávot a listázó komponenshez. Sőt ez egy univerzális komponens lesz, mert bármilyen tartalom beletölthető lesz majd a hasába, és ahhoz ő hozzá fog tudni adni egy görgetősávot.

A Scroll komponensnek kell egy könyvtár és egy komponens fájl:

Ezt be kell importálni az App-ba is (App.js):

import Scroll from "./components/scroll/scroll.component";

A komponenst pedig elkezdjük feltölteni hasznos tartalommal, magyarul megírjuk a Scroll komponens kódját:

import React from "react";
 
const Scroll = () => {
    return(
 
    );
}
 
export default Scroll;

És most jön a children

A Scroll komponens egy olyan komponens lett, aminek a hasában több komponens is előfurdulhat. Úgy is mondhatjuk, hogy a Scroll az egy szülő komponens, aminek lehet egy vagy több gyermeke. A kérdés az, hogy hogyan fogja ő ezeket a „gyerkőcöket” renderelni, megjeleníteni?

Eddig megismertük ezt a két „fickót”: prop és state. Ami hiányzik a körből az a children. Bevallom, amikor először olvastam a children-ről, akkor nekem egy 90-es évekből elhíresült zeneszám jutott eszembe, amit a mai DJ-k is előszeretettel remixelnek még mindig: Robert Miles: Children. Pillanat, meg is hallgatom… :).

De inkább nem akarok eltérni a tárgytól, vissza a React-hez! Szóval a children jelen pillanatban az lesz, ami a Scroll komponensen belül van, vagyis:

<TerminatorList models={filteredModels} />

Ezt a children-t, a props-on keresztül érjük el:

const Scroll = (props) => {
  console.log(props.children);
  return props.children;
};

Ha hibátlanul írtuk a kódunkat, akkor a böngészőben mindennek úgyanúgy kell megjelennie és működnie, mint eddig:

És ez így is van. A konzolban pedig azt látjuk, hogy megjelent egy objektum. Ez a children objektum, aminek a típusa látszik, hogy a TerminatorList:

Mitől lesz görgethető?

Most már tudjuk, hogy van nekünk ez a children is, örülünk is neki. Jöhet akkor a tekerő, azaz a görgető sáv kialakítása. Először is teszek egy div-et a children köré:

const Scroll = (props) => {
  return (
    <div>
      {props.children}
    </div>
  )  
};

Említettem, hogy megtehetném azt is, hogy CSS-el adok görgető stílust a komponenshez. De most a React lehetőségeit használom ki. Lehet adni egy style tulajdonságot a komponensen belül a JSX-ben a “html” elemeknek.

Az értéket kétszeres kapcsos zárójel pár közé teszem. Az első jelenti azt, hogy a JSX-en belül JavaScript kódot fogok megadni. A belső { } jellel pedig azt fogom jelezni, hogy objektumot adok meg. Ebbe helyezem majd el a CSS utasításokat JavaScripttel:

const Scroll = (props) => {
  return (
    <div style={{}}>
      {props.children}
    </div>
  )  
};

Minden CSS tulajdonságnak megvan a JavaScriptes párja. Így például az overflow-y formázó tulajdonságnak az overflowY.

Tehát a második { }-en belül adhatok meg JavaScript-ben CSS stílusokat:

<div
      style={{
        overflowY: "scroll",
        borderTop: "2px dashed #fff",
        borderBottom: "2px dashed #fff",
        height: "350px",
      }}
>

A böngészőben így fog kinézni, ha kicsit összehúzzuk a böngésző ablakát:

Megjelent ez a 350 pixel magas, ronda keretes, görgetősávval felszerelt Scroll komponens. De most nem a design a lényeg, hanem az, hogy kaptunk egy görgethető komponenst! Ráadásul CSS helyett JavaScripttel dizájnoltuk meg. És ugye látható maradt az oldalon a keresődoboz is!