04. Odnos roditelj dijete - kristijan-perkovic96/Osnove-reacta GitHub Wiki

React je jako specifičan prema odnosu komponenti. Njihov odnos je roditelj dijete, uvijek postoji roditeljska komponenta unutar koje se pozivaju druge komponente (dječje komponente). No kako to sve povezati u smislenu cjelinu? Odgovor je jednostavan, možemo prosljeđivati vrijednosti iz roditeljske komponente u dječju, također i metode. JavaScript nema granica po tome pitanju, možete prosljediti što vam god padne na pamet.

Prosljeđivanje vrijednosti se vrši preko props. U klasnoj komponenti kako bismo pristupili props moramo napisati this.props.nazivProps-a, dok u funkcijskoj komponenti ne moramo pisati this. Kroz prethodne tri lekcije mogli ste zamijetiti da se this ne koristi u funkcijskim komponentama.

Primjer prikazuje dvije dječje komponente koje primaju vrijednost iz roditeljske komponente te ju prikazuju na ekranu.

Roditeljska komponenta:

Dječja klasna komponenta:

Dječja funkcijska komponenta:

Prikaz:

Trenutno samo prosljeđujemo vrijednosti iz roditeljske komponente, ranije smo naveli da je moguće proslijediti i metode. Kreirat ćemo metodu koja podiže alert u roditeljskoj komponenti te ćemo ju proslijediti u dječju komponentu i iz nje ju pozvati. Dio teksta ćemo napisati u roditelju, a dio teksta u djetetu kako biste vidjeli da se stvarno poziva metoda iz roditeljske komponente. Nismo kreirali nove komponente nego smo samo nadogradili postojeću roditeljsku i dječju klasnu. Za probu možete napraviti izmjenu nad dječjom funkcijskom komponentom.

Roditeljska:

Dječja:

Prikaz rada:

Sve React aplikacije sastoje se od mnogo manjih komponenti koje međusobno komuniciraju i kreiraju smislenu cjelinu. Nadam se da razumijete koliko je React pojednostavnio kreiranje web aplikacija. Ukoliko imate ekran koji sadrži više zasebnih cjelina kao što su izbornik, forma za pretraživanje ili tablica u kojoj se prikazuju podaci. Možemo svaku od navedenih komponenti kreirati zasebno i povezati unutar jedne velike roditeljske komponente koja sadrži sve podatke koji se trebaju prikazati. Recimo da slučaj korištenja ide ovim smjerom. U formu unosimo podatke na temelju kojih će se pozvati api te ćemo dobiti odgovor koji sadrži podatke, podatke je potrebno prikazati te ih smjestimo u state kako bi mogli proslijediti vrijednosti iz tih varijabli u tablicu koja prikazuje podatke. Kao što vidite nigdje nismo spomenuli izbornik jer se on može nalaziti izvan naše roditeljske komponente, iz razloga što bi on trebao biti dostupan za cijelu aplikaciju, a ne samo unutar naše komponente.