Props & injection HTML

Les composants facilitent la réutilisation d'éléments visuels en encapsulant leurs détails d'implémentation. Toutefois, il est souvent souhaitable de pouvoir personnaliser les données et le comportement d'un composant lors de son utilisation dans un contexte spécifique. Les propriétés de composant, ou Props, permettent de fournir des données à un composant depuis son composant parent, comme on fournirait des attributs à l'instanciation d'un objet.

Définir une props

En HTML, il est déjà possible de paramétrer une balise à l'aide des attributs des balises. Dans le cas d'une image, par exemple :

<img id="my-image" src="https://domaine.com/my-file" />

id et src sont ici attributs de la balise <img/>.

De façon similaire, il est possible de définir des attributs personnalisés lors de l'utilisation d'un composant:

<MyLink url="https://my-awesome-website.com" text="Visit my new website" />

Les propriétés fournies sont ensuite récupérables sous forme de variables au sein du composant enfant:

export default function MyLink(props) {
  console.log(props.text);
  return <a href="https://my-website.com">Let's go to my website !</a>;
}

En React.js, les props sont récupérées en argument de la fonction définissant le composant. L'argument est un objet JavaScript dont chaque attribut correspond à une props fournie par le composant parent.

On applique généralement une déstructuration de l'objet JavaScript pour rendre plus claire la liste des props disponibles sur le composant :

export default function MyLink({ url, text = "Visit my website" }) {
  console.log(text);
  return <a href="https://my-website.com">Let's go to my website !</a>;
}

Cette approche permet d'identifier les props plus clairement et d'y référer plus facilement au sein du composant.

INFO

📌 Comme le montre cet exemple avec la props text, la déstructuration permet également de définir des valeurs par défaut, rendant la définition facultative pour le composant parent.

Injection HTML

Les props récupérées au niveau d'un composant peuvent être directement injectées dans le contenu HTML du composant:

export default function MyLink({ url, text = "Visit my website" }) {
  return <a href="https://my-website.com">{text}</a>;
}

Dans la partie HTML, il est nécessaire de spécifier les expressions JavaScript (statements) entre accolades afin qu'elles ne se confondent pas avec du simple texte HTML. La valeur retournée par l'expression entre accolades sera ajoutée au contenu HTML. Ici, c'est la valeur de la props text que l'on affiche dans le contenu du lien.

NOTE

👉 Les injections ne se limitent pas aux props. Il est possible d'injecter la valeur de n'importe quelle variable JavaScript définie à l'intérieur du composant.

Il est possible, de façon similaire, d'injecter la valeur d'une props ou d'une variable, non pas dans le contenu, mais comme valeur d'un attribut de balise HTML :

export default function MyLink({ url, text = "Visit my website" }) {
  return <a href={url}>{text}</a>;
}

Le lien vers lequel redirige la balise <a> est maintenant déterminé dynamiquement par la valeur fournit par la props url.

🐶 DogCenter

L'usage des props nous permet désormais de personnaliser les contenus de notre composant DogCard avec les informations de différents chiens. Commençons au niveau de notre gallerie dans App par ajouter des attributs de balise pour fournir les informations de nos différents chiens :

import DogCard from './components/DogCard';
import './App.css'

export default function App() {
  return (
    <div>
      <h1>Dog Center</h1>
      <div id="dog-gallery">
        <DogCard 
          name="Rex"
          age={3}
          breed="Golden Retriever"
          pictureUrl="https://cdn.pixabay.com/photo/2022/03/09/20/08/golden-retriever-7058634_1280.jpg"
        />
        <DogCard 
          name="Luna"
          age={2}
          breed="Labrador Retriever"
          pictureUrl="https://cdn.pixabay.com/photo/2019/08/07/14/11/dog-4390885_640.jpg"
        />
        <DogCard 
          name="Buddy"
          age={5}
          breed="Golden Retriever"
          pictureUrl="https://cdn.pixabay.com/photo/2023/11/30/15/49/dog-8421955_640.jpg"
        />
      </div>
    </div>
  );
}

Poursuivons en remplaçant les informations statiques du composant DogCard par des valeurs dynamiques provenant de props :

import "./DogCard.css";

export default function DogCard({ name, age, breed, pictureUrl }) {
  return (
    <div id="dog-card">
      <img
        id="dog-picture"
        src={pictureUrl}
        alt="Dog"
      />
      <div id="dog-description">
        <h3>{name}</h3>
        <p className="dog-description-line">Age: {age} years</p>
        <p className="dog-description-line">Breed: {breed}</p>
      </div>
    </div>
  );
};

Nous disposons maintenant d'une galerie présentant plusieurs chiens du chenil. DogCenter comprend toutefois un grand nombre de chiens, qui peut varier en fonction des adoptions. L'ajout de DogCard reste relativement fastidieux ici et s'adapte encore peu si la liste de chiens présents évolue.

INFO

📌 À partir de ce chapitre, la partie CSS du code ne sera pas représentée afin de simplifier les exemples.

Conclusion

Les props et les injections HTML permettent d'adapter les données des composants de façon dynamiques, les rendant ainsi plus flexibles et réutilisables dans différents contextes. Dans le prochain chapitre, nous verrons comment rendre les composants encore plus adaptables, en introduisant des logiques conditionnelles et itératives au sein même de la définition HTML.