Manipuler le DOM avec les Refs

React met à jour automatiquement leDOMpour correspondre à votre rendu, donc vos composants n'auront souvent pas besoin de le manipuler. Cependant, il peut parfois être nécessaire d'accéder aux éléments DOM gérés par React—par exemple, pour focaliser un nœud, faire défiler jusqu'à lui, ou mesurer sa taille et sa position. Il n'existe pas de méthode intégrée dans React pour faire ces choses, vous aurez donc besoin d'unerefvers le nœud DOM.

Obtenir une ref vers le nœud

Pour accéder à un nœud DOM géré par React, importez d'abord le HookuseRef :

Ensuite, utilisez-le pour déclarer une ref dans votre composant :

Enfin, passez votre ref comme attributrefà la balise JSX pour laquelle vous souhaitez obtenir le nœud DOM :

Le HookuseRefrenvoie un objet avec une seule propriété appeléecurrent. Initialement,myRef.currentseranull. Lorsque React crée un nœud DOM pour ce<div>, React placera une référence à ce nœud dansmyRef.current. Vous pourrez ensuite accéder à ce nœud DOM depuis vosgestionnaires d'événementset utiliser lesAPI navigateur intégréesdéfinies dessus.

Exemple : Focaliser une saisie de texte

Dans cet exemple, cliquer sur le bouton focalisera la saisie :

Pour implémenter cela :

1. DéclarezinputRefavec le HookuseRef.
2. Passez-le comme<input ref={inputRef}>. Cela indique à React deplacer le nœud DOM de cet<input> dans inputRef.current.
3. Dans la fonctionhandleClick, lisez le nœud DOM de la saisie depuisinputRef.currentet appelezfocus()dessus avecinputRef.current.focus().
4. Passez le gestionnaire d'événementshandleClick au <button>aveconClick.

Bien que la manipulation du DOM soit le cas d'utilisation le plus courant pour les refs, le HookuseRefpeut être utilisé pour stocker d'autres choses en dehors de React, comme des identifiants de minuteur. Similairement à l'état, les refs persistent entre les rendus. Les refs sont comme des variables d'état qui ne déclenchent pas de nouveaux rendus lorsque vous les définissez. Lisez à propos des refs dansRéférencer des valeurs avec les Refs.

Exemple : Défiler jusqu'à un élément

Vous pouvez avoir plus d'une seule ref

Accéder aux nœuds DOM d'un autre composant

Vous pouvez passer des refs d'un composant parent à des composants enfantscomme n'importe quelle autre prop.

Dans l'exemple ci-dessus, une ref est créée dans le composant parent,MyForm, et est passée au composant enfant,MyInput.MyInputpasse ensuite la ref à<input>. Comme<input>est uncomposant intégré, React définit la propriété.currentde la ref sur l'élément DOM<input>.

LainputRefcréée dansMyFormpointe maintenant vers l’élément DOM<input>retourné parMyInput. Un gestionnaire de clic créé dansMyFormpeut accéder àinputRefet appelerfocus()pour définir le focus sur<input>.

Quand React attache les refs

Dans React, chaque mise à jour est divisée endeux phases:

• Pendant lerendu,React appelle vos composants pour déterminer ce qui doit être à l’écran.
• Pendant lecommit,React applique les modifications au DOM.

En général, vousne devez pasaccéder aux refs pendant le rendu. Cela vaut également pour les refs contenant des nœuds DOM. Pendant le premier rendu, les nœuds DOM n’ont pas encore été créés, doncref.currentseranull. Et pendant le rendu des mises à jour, les nœuds DOM n’ont pas encore été mis à jour. Il est donc trop tôt pour les lire.

React définitref.currentpendant le commit. Avant de mettre à jour le DOM, React définit les valeursref.currentconcernées ànull. Après avoir mis à jour le DOM, React les définit immédiatement sur les nœuds DOM correspondants.

En général, vous accéderez aux refs depuis des gestionnaires d’événements.Si vous voulez faire quelque chose avec une ref, mais qu’il n’y a pas d’événement particulier pour le faire, vous pourriez avoir besoin d’un Effet. Nous aborderons les Effets dans les pages suivantes.

Bonnes pratiques pour la manipulation du DOM avec les refs

Les refs sont une échappatoire. Vous ne devriez les utiliser que lorsque vous devez « sortir de React ». Les exemples courants incluent la gestion du focus, de la position de défilement, ou l'appel d'API navigateur que React n'expose pas.

Si vous vous en tenez à des actions non destructrices comme le focus et le défilement, vous ne devriez rencontrer aucun problème. Cependant, si vous essayez demodifierle DOM manuellement, vous risquez d'entrer en conflit avec les modifications que React effectue.

Pour illustrer ce problème, cet exemple inclut un message de bienvenue et deux boutons. Le premier bouton bascule sa présence en utilisant lerendu conditionnelet l'état, comme vous le feriez habituellement avec React. Le second bouton utilise l'API DOM remove()pour le supprimer de force du DOM en dehors du contrôle de React.

Essayez d'appuyer plusieurs fois sur « Basculer avec setState ». Le message devrait disparaître et réapparaître. Ensuite, appuyez sur « Supprimer du DOM ». Cela le supprimera de force. Enfin, appuyez à nouveau sur « Basculer avec setState » :

Après avoir supprimé manuellement l'élément DOM, essayer d'utilisersetStatepour le réafficher provoquera un plantage. C'est parce que vous avez modifié le DOM, et React ne sait pas comment continuer à le gérer correctement.

Évitez de modifier les nœuds DOM gérés par React.Modifier, ajouter ou supprimer des enfants d'éléments gérés par React peut entraîner des résultats visuels incohérents ou des plantages comme ci-dessus.

Cela ne signifie pas pour autant que vous ne pouvez absolument pas le faire. Cela nécessite de la prudence.Vous pouvez modifier en toute sécurité les parties du DOM que React n'aaucune raisonde mettre à jour.Par exemple, si une certaine balise<div>est toujours vide dans le JSX, React n'aura aucune raison de toucher à sa liste d'enfants. Par conséquent, il est sûr d'y ajouter ou d'en supprimer manuellement des éléments.

Récapitulatif

• Les refs sont un concept générique, mais le plus souvent, vous les utiliserez pour contenir des éléments DOM.
• Vous demandez à React de placer un nœud DOM dansmyRef.currenten passant<div ref={myRef}>.
• Généralement, vous utiliserez les refs pour des actions non destructrices comme le focus, le défilement ou la mesure d'éléments DOM.
• Un composant n'expose pas ses nœuds DOM par défaut. Vous pouvez choisir d'exposer un nœud DOM en utilisant la propref.
• Évitez de modifier les nœuds DOM gérés par React.
• Si vous modifiez des nœuds DOM gérés par React, modifiez uniquement les parties que React n'a aucune raison de mettre à jour.