Sélectionnez les éléments DOM dans React

À un moment ou à un autre, chaque développeur JavaScript a utilisé la méthode getElementById(). Il prend un argument id et renvoie un élément HTML avec cet ID. Cette méthode est extrêmement utile pour effectuer des mutations DOM manuelles.

Saisir un nœud d’élément HTML est une nécessité courante. De nombreux développeurs expérimentés en JavaScript, mais novices dans le framework React, souhaitent savoir comment effectuer cette opération dans React.

Réfs dans React

Les références, abréviation de références, sont un moyen facile d’accéder au DOM dans React. Afin de lier l’élément (ou le composant) à une référence, l’élément doit avoir un attribut ref égal à votre ref. Un exemple d’élément <div> peut être lié à testRef de cette façon : <div ref={this.testRef}></div>. C’est une bonne pratique de stocker les instances ref dans une variable.

dans les composants fonctionnels

Depuis l’introduction des crochets il y a environ deux ans, les composants fonctionnels sont devenus beaucoup plus robustes. Si vous utilisez une version moderne de React (par exemple, 16.8.0), vous pouvez importer le hook useRef(), qui peut être utilisé pour définir une référence. Voici un exemple de composant fonctionnel qui référence une variable aléatoire pendant le rendu :

function App() {
    const elementVariable = useRef(null)
    useEffect(() => console.log(elementVariable), [] )
    return (
        <div ref={elementVariable}>
           <h1></h1> 
        </div>
    )
}

Dans cet exemple, en définissant elementVariable égal à l’instance du crochet useRef(), nous stockons le nœud HTML dans la variable.

Hook ne fonctionnera que si l’élément HTML a un attribut ref défini sur le nom de la variable.

Un argument passé au hook useRef() spécifie la valeur initiale de l’instance ref. Une fois l’élément <div></div> monté, la variable contiendra la valeur du nœud HTML. Voici à quoi ressemblera la console :

dans les composants de classe

Pendant longtemps, l’utilisation de composants de classe était le moyen par défaut de créer des composants React interactifs.

Depuis la sortie de la version 16.3, les développeurs React peuvent utiliser React.createRef() pour créer une référence. L’API peut être différente, mais les hooks React.createRef() et useRef() créent essentiellement les mêmes instances de référence.

Dans les composants de classe, l’instance ref est stockée dans une propriété de classe. Voici un exemple :

class App extends Component {
  constructor(props){
    super(props)
    this.ref = React.createRef()
  }
  componentDidMount(){
    console.log(this.ref);
  }
  render() {
    return <h1 ref={this.ref}>Referenced Text</h1>;
  }
}

Si vous regardez la console, vous verrez un objet avec la propriété current qui contient le nœud HTML.

Les développeurs utilisant la version React > 16.3 doivent utiliser une syntaxe légèrement différente pour créer des références. Exemple:

<div ref={(element) => this.ref = element}></div>

La référence créée de cette manière est appelée un rappel ref car nous définissons l’attribut ref sur une fonction de rappel qui prend l’élément HTML comme argument et attribue cette valeur à la propriété ref de l’instance de classe.