L'objet props
où comment passer des valeurs d’un component père à un component fils
Un "component" père peut créer des "components" fils.
Pour cela, il faut :
- que le component père importe la classe du component fils
- créer des éléments fils dans le “render” avec à minima l’attribut key (qui pourra être retrouvé en utilisant props.id) et ensuite autant de paires “clé valeur” que nécessaire qui seront passés en argument pour initier le component fils
- que le component fils récupère ces arguments via la l'objet props
Les props sont en lecture seule. Un composant ne doit jamais modifier ses propres props.
Ex :
import React, { Component } from "react";
import Counter from "./counter";
import { compileFunction } from "vm";
class Counters extends Component {
state = {
counters: [
{ id: 1, value: 0 },
{ id: 2, value: 1 },
{ id: 3, value: 2 },
{ id: 4, value: 3 },
{ id: 5, value: 4 }
]
};
render() {
return (
<div>
{this.state.counters.map(counter => (
<Counter key={counter.id} value={counter.value} selected={true} />
))}
</div>
);
}
}
export default Counters;
Passer du code HTML d'un component père à un component fils
En reprenant l'exemple précédent, il suffit d'ajouter le code suivant sur le composant père :
<Counter key={counter.id} value={counter.value} selected={true} />
<h3>Titre {counter.id} ici </h3>
</Counter>
Puis de récupérer ces informations dans la méthode "render" du composant fils :
{this.props.children}
Différence entre state et props
Props est un “entrant” qui est donné à un component depuis un autre component (souvent le père).
State est local à chaque component
Les autres components ne peuvent atteindre les “states” d’un component.
En revanches, les autres components peuvent donner des props à un component.
Props est “en lecture seule”. Un component ne peut changer ses props alors qu’il peut changer son “state”
Propager un événement à un composant parent
Il suffit pour cela que le component parent passe à l’enfant le nom de la méthode qui va être appelée via les props. Ex :
// Père
handleDelete() {
console.log("Efface man !");
}
...
<Counter
onDelete={this.handleDelete}
key={counter.id}
value={counter.value}
selected={true}
/>
// Fils
<button
className="btn btn-danger btn-sm m-2"
onClick={this.props.onDelete}
>
Single source of truth
cf https://fr.reactjs.org/docs/lifting-state-up.html
Il est important de comprendre qu’il n’est pas possible de donner la possibilité à deux composants de modifier les mêmes données.
C’est au composant “ancêtre” de faire le travail sans quoi tout ce qui sera fait par le descendant ne sera pas pris en compte car deux “DOM virtuels” vont cohabiter sans se connaître. On appelle cela "faire remonter l'état".
En définitive seul le component ancêtre devra :
- posséder un objet “state”
- posséder des méthodes qui modifient le DOM via la méthode setState