Comment sélectionner des éléments DOM dans React : alternatives à « document.getElementById() » ?

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 des références

• Utiliser les références avec les composants de fonction :(v16.8.0) Utiliser 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 élément et passer une fonction de rappel qui reçoit la référence au DOM element.

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

• Utilisez des 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 (
      <div>
        <Progressbar
          completed={25}
         >

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.

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!