Comment sélectionner un élément DOM dans React ? Quel est l'équivalent de document.getElementById() dans React

Dans React, contrairement au travail avec JavaScript Vanilla, l'accès direct aux éléments DOM est différent. React utilise un DOM virtuel pour mettre à jour efficacement le DOM réel, ce qui le rend différent du JavaScript Vanilla.

Comment accéder à un élément DOM

Option 1 : Utiliser les références

• Utiliser les références avec les composants de fonction :(v16.8.0) Utilisez useRef et forwardRef. Définissez la référence avec useRef, puis transmettez-la à l'élément DOM à l'aide de forwardRef. Pour accéder à l'élément, utilisez la propriété actuelle de la ref (ref.current).

Option 2 : Utilisation de React.createRef (v16.3)

• Créez une référence à l'aide de React.createRef() et attachez-la à un élément pour y accéder plus tard. Utilisez ref.current pour obtenir le nœud DOM.

Option 3 : Utilisation du modèle de rappel (héritage)

• Définissez l'attribut ref dans le JSX et transmettez une fonction de rappel qui reçoit la référence à l'élément DOM.

Option 4 : Utilisation des références de chaîne (Héritage)

• Utilisez les références de chaîne en définissant l'attribut ref sur une chaîne identifiant l'élément DOM. Accédez à l'élément en utilisant this.refs.[stringRef].

Exemple

Vous trouverez ci-dessous un exemple d'utilisation du modèle de rappel pour sélectionner un élément DOM :

  render() {
    return (
      

        
Pour accéder aux éléments, vous pouvez utiliser this.progressBars[0], this.progressBars[1] et this.progressBars[2] pour effectuer des opérations sur eux.