Communication unidirectionnelle entre parent et enfant dans React JS

Introduction à React et à la communication entre les composants

React est une bibliothèque JavaScript populaire utilisée pour créer des interfaces utilisateur interactives. L’un des aspects clés de React est la communication entre les composants, en particulier entre les parents et les enfants. Cette communication permet aux données de circuler de manière fluide à travers une hiérarchie de composants, garantissant une expérience utilisateur dynamique et réactive.

Composants parents et enfants

1) Compréhension des composants parents et enfants

Dans React, les composants sont organisés en une hiérarchie où un composant parent peut avoir plusieurs composants enfants. Les composants enfants sont encapsulés dans le composant parent, ce qui permet de créer des structures modulaires et réutilisables.

2) Unidirectionnalité dans React

React suit un flux de données unidirectionnel, ce qui signifie que les données circulent du composant parent vers les composants enfants. Cette approche garantit un flux de données clair et prévisible, simplifiant ainsi la gestion de l’état de l’application.

Passage des données avec les props

3) Utilisation des props pour transmettre des données

Les props (propriétés) sont utilisées pour transmettre des données d’un composant parent à un composant enfant. Les props sont passées en tant que paramètres lors de la création d’un composant et peuvent être utilisées pour configurer son apparence et son comportement.

Exemple concret :

// Composant Parent
class ParentComponent extends React.Component {
  render() {
    const nom = "Jean"; 
  return <ChildComponent nom={nom} />;
  }
}
 
// Composant Enfant 
class ChildComponent extends React.Component {
  render() {
    const { nom } = this.props;

    return <p>Bonjour, {nom} !</p>;
  }
}

5) Passage de données d’un composant parent à un composant enfant

Pour transmettre des données d’un composant parent à un composant enfant, vous pouvez spécifier les props lors de l’appel du composant enfant. Les composants enfants peuvent ensuite accéder aux données transmises via les props et les utiliser pour afficher des informations ou effectuer des actions.

6) Personnalisation des composants enfants avec les props

En utilisant les props, les composants enfants peuvent être personnalisés en fonction des données fournies par le composant parent. Par exemple, un composant parent peut passer une prop appelée « couleur » avec une valeur spécifique, et le composant enfant peut utiliser cette prop pour définir la couleur de son élément.

Gestion des événements et remontée des données

7) Gestion des événements entre les composants parents et enfants

Parfois, il est nécessaire de gérer les événements déclenchés dans un composant enfant au niveau du composant parent. Cela peut être utile pour effectuer des actions spécifiques ou mettre à jour l’état de l’application en fonction des interactions utilisateur.

8) Passage de fonctions en tant que props

Pour permettre la remontée des données, un composant parent peut passer une fonction en tant que prop à un composant enfant. Lorsque l’événement se produit dans le composant enfant, il peut appeler cette fonction pour transmettre les données au composant parent, qui peut ensuite les traiter en conséquence.

Exemple concret :

// Composant Parent
class ParentComponent extends React.Component { 
  handleChildEvent = (data) => {
  // Traiter les données du composant enfant
  console.log(data);
}
 
render() {
  return <ChildComponent onEvent={this.handleChildEvent} />;
  }
}

// Composant Enfant
class ChildComponent extends React.Component {
  handleClick = () => {
    const data = "Données importantes";
    this.props.onEvent(data);
  }

  render() {
    return <button onClick={this.handleClick}>Cliquez-moi</button>;
  }
}

9) Exemple pratique : remontée des données

Pour illustrer la remontée des données, prenons l’exemple d’un formulaire de saisie dans un composant enfant. Lorsque l’utilisateur soumet le formulaire, le composant enfant peut appeler une fonction passée en tant que prop pour transmettre les données au composant parent, qui peut ensuite les traiter ou les stocker.

Conclusion 

La communication unidirectionnelle entre les parents et les enfants est un concept clé de React. En comprenant comment utiliser les props pour transmettre des données du parent à l’enfant et comment gérer les événements pour remonter des données du composant enfant vers le composant parent, vous pouvez construire des applications React bien structurées et réactives. Continuez à explorer et à expérimenter avec React pour développer des interfaces utilisateur puissantes et interactives.

Site React.dev