Comprendre les références et le DOM dans React : accéder et manipuler les éléments du DOM

Refs et DOM dans React : accès et manipulation des éléments DOM

Dans React, les réfs sont utilisées pour accéder et interagir avec les éléments DOM directement. Bien que React gère généralement le DOM de manière déclarative via l'état et les accessoires, il peut arriver que vous deviez interagir directement avec le DOM, par exemple pour les animations, le focus sur le champ de formulaire ou la mesure des dimensions des éléments. Dans ces cas, les références fournissent un moyen d'accéder aux nœuds DOM sous-jacents.

---

1. Que sont les références dans React ?

Une ref (abréviation de référence) est un objet qui vous permet de faire référence à un élément DOM ou à une instance de composant React. Les références peuvent être créées en utilisant React.createRef() dans les composants de classe ou useRef() dans les composants de fonction. Les références sont généralement utilisées pour :

• Accédez directement au DOM (par exemple, focalisez un champ de saisie ou obtenez la valeur d'un élément de formulaire).
• Déclenchez des animations ou des actions impératives.
• Intégrez-vous à des bibliothèques tierces qui nécessitent une manipulation directe du DOM.

---

2. Création et utilisation de références

Composants en classe :

Dans les composants de classe, les références sont créées à l'aide de React.createRef(). La référence créée est ensuite attachée à un élément DOM via l'attribut ref.

Exemple de références dans les composants de classe :

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    // Create a ref to access the input element
    this.inputRef = React.createRef();
  }

  handleFocus = () => {
    // Access the DOM node directly and focus the input element
    this.inputRef.current.focus();
  };

  render() {
    return (
      <div>
        <input ref="{this.inputRef}" type="text">
        <button onclick="{this.handleFocus}">Focus Input</button>
      </div>
    );
  }
}

export default MyComponent;

Dans cet exemple :

• this.inputRef est créé à l'aide de React.createRef().
• La référence est affectée au élément via l'attribut ref.
• Dans la méthode handleFocus, nous accédons à l'élément d'entrée via this.inputRef.current et appelons focus() pour focaliser par programme le champ de saisie.

Dans les composants de fonction :

Dans les composants de fonction, les références sont créées à l'aide du hook useRef. Le hook useRef vous permet de créer un objet de référence mutable qui persiste lors des nouveaux rendus.

Exemple de références dans les composants de fonction :

import React, { useRef } from 'react';

const MyComponent = () => {
  const inputRef = useRef();

  const handleFocus = () => {
    // Access the DOM node directly and focus the input element
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref="{inputRef}" type="text">
      <button onclick="{handleFocus}">Focus Input</button>
    </div>
  );
};

export default MyComponent;

Dans cet exemple :

• inputRef est créé à l'aide du hook useRef.
• La référence est attachée au élément utilisant l'attribut ref.
• La fonction handleFocus accède à l'élément d'entrée à l'aide de inputRef.current et appelle focus() pour focaliser le champ de saisie.

---

3. Cas d'utilisation pour les références

a. Accéder aux éléments DOM

Les références sont couramment utilisées pour accéder et manipuler directement les éléments DOM. Par exemple, se concentrer sur une saisie de texte ou mesurer la taille d'un élément peut être facilement réalisé avec des références.

b. Gérer la concentration

Les références vous permettent de gérer le focus sur les éléments, comme par exemple se concentrer sur un champ de saisie lors du montage d'un composant ou après une certaine action.

Exemple de gestion de la concentration avec les références :

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    // Create a ref to access the input element
    this.inputRef = React.createRef();
  }

  handleFocus = () => {
    // Access the DOM node directly and focus the input element
    this.inputRef.current.focus();
  };

  render() {
    return (
      <div>
        <input ref="{this.inputRef}" type="text">
        <button onclick="{this.handleFocus}">Focus Input</button>
      </div>
    );
  }
}

export default MyComponent;

Dans cet exemple, l'entrée est automatiquement focalisée lors du montage du composant, grâce au hook useEffect et à la ref.

c. Déclenchement d'animations ou intégration avec des bibliothèques tierces

Les références sont souvent utilisées pour interagir avec des bibliothèques tierces ou déclencher des animations impératives. Par exemple, vous pouvez utiliser une référence pour contrôler une animation personnalisée ou interagir avec une bibliothèque non-React comme jQuery.

d. Validation du formulaire

Les références peuvent également être utilisées pour collecter des données de formulaire sans stocker les données dans l'état de React, offrant ainsi une alternative simple pour les formulaires qui n'ont pas besoin de mises à jour en temps réel.

---

4. Gestion des références pour plusieurs éléments

Lorsque vous travaillez avec plusieurs éléments, vous pouvez stocker des références dans un objet ou un tableau pour accéder à chaque élément.

Exemple de références pour plusieurs éléments :

import React, { useRef } from 'react';

const MyComponent = () => {
  const inputRef = useRef();

  const handleFocus = () => {
    // Access the DOM node directly and focus the input element
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref="{inputRef}" type="text">
      <button onclick="{handleFocus}">Focus Input</button>
    </div>
  );
};

export default MyComponent;

Dans cet exemple, plusieurs éléments d'entrée sont gérés à l'aide d'un tableau de références et un bouton est utilisé pour focaliser la deuxième entrée.

---

5. Réfs contre État

Alors que les références fournissent un moyen d'interagir avec le DOM, state dans React est utilisé pour gérer les données qui affectent le rendu de l'interface utilisateur. Il est important de comprendre quand utiliser chacun :

• State est utilisé pour le rendu dynamique : lorsque les données changent et affectent la façon dont l'interface utilisateur doit être rendue, utilisez state.
• Les Les références sont utilisées pour les actions impératives : lorsque vous devez interagir directement avec des éléments du DOM (par exemple, vous concentrer, mesurer ou déclencher des animations), utilisez des références.

---

6. Conclusion

Les références dans React sont une fonctionnalité puissante pour accéder et manipuler directement les éléments DOM. Ils fournissent un moyen impératif d'interagir avec l'interface utilisateur, permettant des opérations telles que la focalisation des champs de saisie, le déclenchement d'animations ou l'intégration avec des bibliothèques tierces.

Alors que React encourage les approches déclaratives avec l'état et les accessoires, les références constituent un outil essentiel lorsque vous devez effectuer des interactions plus directes avec le DOM.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!