Parent e child component
Nella nostra web app React, all’interno dei component, che chiameremo parent-component, inseriremo dei component denominati child-component. Ogni component, infatti, mostrerà una singola porzione del frontend. Successivamente passeremo le informazioni al child tramite il prop drilling come vedremo tra poco.
Il caso tipico è quello in cui nel component padre, prendiamo l’informazione da dover mostrare a schermo, per esempio tramite una GET API. Tale informazione, la passeremo al child-component e tale component mostrerà a schermo l’informazione, perché l’avremo inserita all’interno del suo return.
I modi per passare le informazioni da un component all’altro, sono diverse, ma il metodo di base è il “prop drilling”. Con props si intendono le proprietà, cioè le informazioni che passiamo da un component ad un altro.
Come inserire un component in un altro component
Di seguito vediamo come inserire un child-component all’interno di un altro component.
import ListaDipendenti from '../components/ListaDipendenti';
let JsonLocale = require('../jsonFakeApi/list.json');
return (
<div className="page-template">
<h1>Function Component</h1>
<ListaDipendenti listaDipendenti={JsonLocale}/>
</div>
);
Come si vede, è sufficiente inserire il tag dell’import. In questo caso ovviamente, il child component è “ListaDipendenti”.
Prop drilling nel function component
Vediamo adesso come effettuare concretamente il passaggio di props da un component padre a un component figlio di tipo function.
Nel codice che abbiamo visto, la prop che passiamo al figlio è l’oggetto “JsonLocale”, ma ovviamente avrebbe potuto essere una string o una variabile di un qualsiasi tipo.
Il tag “listaDipendenti” è il nome che abbiamo dato a quella prop nel child-component.
Esistono diversi modi per eseguire l’intero flusso di trasferimento delle props. Di seguito vediamo il metodo a nostro avviso più semplice, completo e flessibile.
Il child-component:
import React from 'react';
import { Dipendente } from '../models/Dipendente';
interface ComponentProps {
listaDipendenti?: Dipendente[];
}
export type Props = ComponentProps;
function ListaDipendenti(props: Props) {
return (
<div>
<h2>Lista dipendenti nel component child:</h2>
{props.listaDipendenti?.map((item, index) => (
<div key={index} className="scheda-dipendente">
<div>Nome: {item.nome}</div>
<div>Codice: {item.codice}</div>
</div>
)) || "La lista è undefined"}
</div>
);
}
export default ListaDipendenti;
Nell’ “interface” inseriamo la props passata dal component genitore. Rendiamo tale interface esportabile, così da poterla importare come parametro nel function component.
Infine, eseguiamo un mapping sull’oggetto, perché in questo caso, l’oggetto è una list di oggetti JSON. Questo è anche il caso più comune che avremo nello sviluppo di web app in React.
Il punto interrogativo poco prima del map, indica che quella variabile può essere undefined. Qualora lo fosse, abbiamo previsto comunque la stampa di un avviso poco più in basso alla fine del mapping.
Prop drilling nel class component
Nel caso di class component vale quanto detto in precedenza per il function component, ma con una differenza che riguarda il modo di introdurre le props dentro la classe.
Come è possibile vedere dal codice sottostante, le props vengono inserite come argomento e passate tramite il costruttore.
Ma attenzione. L’uso nel mapping di tale props richiede l’uso della keyword “this”.
import React from "react";
import { Dipendente } from '../models/Dipendente';
export type Props = {
listaDipendenti?: Dipendente[];
};
class ListadipendentiClass extends React.Component<Props> {
constructor(props: Props) {
super(props);
}
render() {
return (
<div>
<h2>Lista dipendenti nel class component child:</h2>
{this.props.listaDipendenti?.map((item, index) => (
<div key={index} className="scheda-dipendente">
<div>Nome: {item.nome}</div>
<div>Codice: {item.codice}</div>
</div>
)) || "La lista è undefined"}
</div>
)
}
}
export default ListadipendentiClass;
Repository del progetto in progress su GitHub: https://github.com/DoAgency/ReactJs