Introduction aux Props

Dans React, les composants utilisent des props ou "propriétés" pour transmettre et afficher des informations à travers l'application. En d'autres termes, les props sont les données qui sont transférées d'un composant à un autre. Les composants parents ont la capacité de passer des props à leurs composants enfants, mais l'inverse n'est pas possible. Les props peuvent être de divers types de données, tels que :

• Nombres
• Chaînes de caractères
• Fonctions
• Objets

Syntaxe des Props

Voici un exemple de la façon dont vous pouvez passer des props d'un composant parent à un composant enfant :

import React from 'react';
class ParentComponent extends React.Component {  
  render() {    
    return ;  
  }
}
function ChildComponent(props) {  
  return 
Ceci est prop1 : {props.prop1}. Ceci est prop2 : {props.prop2}.
;  
}

Accéder aux Props via this.props

Chaque composant possède une propriété appelée props. Les props d'un composant sont regroupées dans un objet, et vous pouvez y accéder avec l'expression this.props. Par exemple, voici comment visualiser l'objet props à l'intérieur d'une méthode de rendu :

render() {  
  // Affiche l'objet props  
  console.log(this.props);
  return 
Bonjour le monde
;
}

Transmettre des Props à un Composant

Pour fournir des informations à un composant React, il suffit de lui donner un attribut :

Prenons l'exemple où vous souhaitez transmettre le message "Ceci est une info top secrète." Voici comment procéder :

Comme vous pouvez le voir, vous devez donner un nom à l'information que vous souhaitez transmettre. Dans cet exemple, nous avons choisi le nom message. Vous pouvez choisir n'importe quel nom que vous préférez. Pour passer des données qui ne sont pas des chaînes de caractères, enveloppez ces données dans des accolades. Par exemple, pour passer un tableau :

Affichage des Props

Il est fréquent qu'un composant doive afficher les informations qui lui sont transmises. Voici comment faire pour afficher ces données :

1. Identifiez la classe du composant qui doit recevoir les informations.
2. Incluez this.props.nom-de-l-information dans la méthode de rendu de cette classe.

import React from 'react';
import ReactDOM from 'react-dom';
class Greeting extends React.Component {  
  render() {    
    return 
Salut, {this.props.firstName} !
;  
  }
}
ReactDOM.render(, document.getElementById('app'));

Utilisation des Props pour Créer un Site Web

La gestion efficace des props est cruciale pour le développement de n'importe quel projet React, qu'il s'agisse d'un site web ou d'une application. Grâce à l'utilisation des props, vous pouvez créer des composants réutilisables et dynamiques qui permettent de rendre votre site web interactif et engageant. Par exemple, si vous construisez une application de blog, vous pouvez créer un composant Article qui accepte des props pour le titre, le contenu et l'auteur. Cela rendra le composant flexible et capable de générer dynamiquement plusieurs articles sur votre site. En résumé, en maîtrisant l'utilisation des props, vous vous rapprochez de la création de projets web modernes et professionnels.