Communication Parent-Enfant dans React avec les Refs

Une gestion efficace de la communication entre les composants parent et enfant est cruciale pour construire des applications React bien structurées. Bien que les props soient la méthode préférée pour la plupart des flux de données, des situations se présentent où un composant parent doit invoquer directement une fonction au sein d’un enfant. Cet article explore comment réaliser cela en utilisant les refs, en se concentrant sur les meilleures pratiques et en soulignant l’importance d’une utilisation judicieuse des refs.

Table des matières

• Comprendre les Refs dans React
• Appeler des fonctions enfant depuis des composants parent de classe
• Appeler des fonctions enfant depuis des composants parent fonctionnels
• Bonnes pratiques et alternatives

Comprendre les Refs dans React

Les refs permettent d’accéder directement aux éléments DOM ou aux instances de composants. Elles ne font pas partie du flux de données du composant React et doivent être utilisées avec parcimonie. Bien qu’elles offrent un accès direct aux composants enfants, leur surutilisation peut conduire à un code moins maintenable et plus difficile à tester. Privilégiez l’utilisation des props pour la communication parent-enfant typique chaque fois que possible.

Appeler des fonctions enfant depuis des composants parent de classe

Dans les composants de classe, nous utilisons React.createRef() pour créer une ref et la lui assigner au composant enfant. Le parent accède ensuite à l’instance de l’enfant et appelle sa méthode.

// ChildComponent.js
import React from 'react';

class ChildComponent extends React.Component {
  myChildFunction = () => {
    console.log('Fonction enfant appelée !');
  };

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

export default ChildComponent;

// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
  }

  callChildFunction = () => {
    if (this.childRef.current) {
      this.childRef.current.myChildFunction();
    }
  };

  render() {
    return (
      <div>
        <button onClick={this.callChildFunction}>Appeler la fonction enfant</button>
        <ChildComponent ref={this.childRef} />
      </div>
    );
  }
}

export default ParentComponent;

Appeler des fonctions enfant depuis des composants parent fonctionnels

Les composants fonctionnels utilisent le hook useRef pour une fonctionnalité similaire. Le hook useRef renvoie un objet mutable dont la propriété .current est initialisée à null et persiste entre les rendus.

// ParentComponent.js
import React, { useRef } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const childRef = useRef(null);

  const callChildFunction = () => {
    if (childRef.current) {
      childRef.current.myChildFunction();
    }
  };

  return (
    <div>
      <button onClick={callChildFunction}>Appeler la fonction enfant</button>
      <ChildComponent ref={childRef} />
    </div>
  );
}

export default ParentComponent;

Bonnes pratiques et alternatives

Bien que les refs offrent un accès direct, elles rendent le code plus difficile à tester et à comprendre. Envisagez ces alternatives avant de recourir aux refs :

• Callbacks : Passez une fonction du parent à l’enfant comme prop. L’enfant appelle cette fonction en cas de besoin, en renvoyant toutes les données nécessaires au parent.
• Bibliothèques de gestion d’état : Des bibliothèques comme Redux ou Context API offrent des moyens plus structurés de gérer le flux de données et la communication entre les composants, rendant votre application plus facile à maintenir et à mettre à l’échelle.
• Événements personnalisés : Diffusez des événements personnalisés depuis le composant enfant et écoutez-les dans le parent.

N’oubliez pas d’utiliser les refs avec parcimonie. Privilégiez des mécanismes de flux de données plus propres et plus prévisibles chaque fois que possible.