React - Bibliothèque Javascript pour le frontend
Page 11: Les props en React
Toutes les pages 
React - Bibliothèque Javascript pour le frontend
Page 11
Les props en React
Les props en React
Les props en React
Qu’est ce qu’un prop ?
Un prop(qui et une abréviation de property) est un paramètre qu’un composant parent transmet à un composant enfant.Nous avons vu qu’un composant (fonctionnel) est une fonction Javascript qui retourne du JSX. Les arguments que vous passez à travers ce genre de fonctions est tout simplement un prop.
On préfère souvent utiliser le terme pluriel props au lieu de "prop". Donc, bien que l’expression "un props" ne soit pas syntaxiquement correcte, elle est quand même acceptée dans le jargon React.
Dans la leçon consacrée à la création et l’importation des composants réutilisables, j’ai précisé que ces derniers sont très pratiques en raison de leur réutilisabilité de nombreuses fois dans notre application. Cependant, si on importe un composant, il sera toujours intégré de la même façon vu que son code est figé. C’est là qu’interviennent les props, c’est justement pour personnaliser la façon avec laquelle le composant importé sera intégré à l’interface graphique.
Transmettre et utiliser les props
Reprenons l'exemple du composant <Boutons /> qu'on a écrit la dernière fois et et qui consiste à intégrer deux boutons dans notre composant principal, un pour valider l'autre pour annuler.Imaginons que l'on souhaite changer l'étiquette des deux boutons à chaque réintégration. Disons par exemple que cette fois, on veut appliquer respectivement les message "Accepter et continuer" et "Annuler et retourner".
Le code de l'application principale <App /> (ou composant parent) ressemblera à ceci:
import Boutons from "./components/Boutons"
function App() {
return (
<>
<Boutons
valider="Accepter et continuer"
rejeter="Annuler et retourner" />
</>
);
}
export default App;
Vous avez constaté qu'on a ajouté des props nommés valider et rejeter exactement comme si c'étaient des attributs HTML. Leurs valeurs correspondent aux étiquettes que vous souhaitez appliquer aux deux boutons.
function App() {
return (
<>
<Boutons
valider="Accepter et continuer"
rejeter="Annuler et retourner" />
</>
);
}
export default App;
Maintenant, voyons comment prendre en compte ces props dans le composant enfant <Boutons />:
function Boutons(props){
return(
<>
<button>{props.valider}</button>
<button>{props.rejeter}</button>
</>
)
}
export default Boutons
Tout d'abord, nous avons spécifié un argument dans la fonction Boutons qui implémente notre composant enfant. Sans beaucoup d'originalité, je l'ai nommé props.
return(
<>
<button>{props.valider}</button>
<button>{props.rejeter}</button>
</>
)
}
export default Boutons
Ce qu'il faut savoir, c'est que cet argument est un objet Javascript donc les clés sont les noms des props qu'on a spécifiés dans le composant parent (à savoir valider et rejeter) et les valeurs sont les les messages respectifs "Accepter et continuer" et "Annuler et retourner". Donc, il suffit de placer ces valeurs là à l'endroit voulu, sans oublier de procéder à l'interpolation JSX en utilisant les accolades.
Il est possible de procéder à la déstructuration de l'objet Javascript au moment de la spécification des arguments. Le code ressemblera à ceci:
function Boutons({valider,rejeter}){
return(
<>
<button>{valider}</button>
<button>{rejeter}</button>
</>
)
}
export default Boutons
C'est une technique qui permet d'éviter de chaîner les objets avec leurs clés dans le code, ce qui pourrait rendre le code plus simple (un peu comme c'est le cas la manipulation des states avec le hook useState).
return(
<>
<button>{valider}</button>
<button>{rejeter}</button>
</>
)
}
export default Boutons
Le prop children (props.children)
Le prop children (connu sous le nom de props.children) est un prop spécial qui permet au composant d'avoir accès aux éléments qu'il contient quand il a été invoqué dans le composant parent. Le composant en question devient dans ce cas un wrapper (ou conteneur).Imaginons que cette fois, on veut créer un composant réutilisable dont le rôle consiste seulement à appliquer une bordure à l'aide du CSS. Donc, le contenu qui sera affiché dans ce composant là n'est pas défini à l'avance, mais sera spécifié au moment de son invocation.
Nous allons par exemple, créer un autre composant nommé Notification (c'est comme si on veut créer un espace de notification avec une bordure). Le code de ce composant (qu'on a placé dans le répertoire components) ressemblera à ceci:
function Notification(props){
return (
<div style={{border:"solid 1px #000"}}>
{props.children}
</div>
)
}
export default Notification
L'objectif est d'afficher le contenu (qui sera spécifié dans le composant <App />) avec une bordure noire. Le prop props.children fait référence à ce contenu là.
return (
<div style={{border:"solid 1px #000"}}>
{props.children}
</div>
)
}
export default Notification
Le style CSS appliqué (connu sous le nom de inline CSS car il s'agit d'un style local) a été spécifié en guise d'objet Javascript. Nous allons voir comment appliquer du CSS en React plus loin dans ce cours.
Le code du composant principal <App /> ressemblera à ceci:
import Notification from "./components/Notification"
function App() {
return (
<>
<Notification>
<h1>Important!</h1>
</Notification>
</>
);
}
export default App;
Premièrement, vous avez vu cette fois nous avons invoqué le composant Notification en utilisant les "balises" ouvrante et fermante. C'est normal, car il s'agit dans ce cas d'un wrapper qui contient des données. Ces données là constituent la valeurs du props.children, c'est à dire la balise H1 qui renferme le texte "Important!".
function App() {
return (
<>
<Notification>
<h1>Important!</h1>
</Notification>
</>
);
}
export default App;
Donc, au moment de l'exécution, on aura quelque chose comme ceci:
Important!
Page 11
Les props en React
Les props en React
