Comment référencer un élément DOM dans React

Découvrez comment référencer un élément DOM dans React

React est excellent pour extraire le DOM lors de la création d'applications.

Mais que faire si vous souhaitez accéder à l'élément DOM représenté par un composant React?

Peut-être que vous devez ajouter une bibliothèque qui interagit directement avec le DOM comme une bibliothèque de graphiques, peut-être que vous devez appeler une API DOM, ou ajouter le focus sur un élément.

Quelle que soit la raison, une bonne pratique consiste à s'assurer qu'il n'y a pas d'autre moyen de le faire sans accéder directement au DOM.

Dans le JSX de votre composant, vous pouvez affecter la référence de l'élément DOM à une propriété de composant à l'aide de cet attribut:

ref={el => this.someProperty = el}

Mettez cela en contexte, par exemple avec unbuttonélément:

<button ref={el => (this.button = el)} />

buttonfait référence à une propriété du composant, qui peut ensuite être utilisée par les méthodes du cycle de vie du composant (ou d'autres méthodes) pour interagir avec le DOM:

class SomeComponent extends Component {
  render() {
    return <button ref={el => (this.button = el)} />
  }
}

Dans un composant de fonction, le mécanisme est le même, vous évitez simplement d'utiliserthis(car il ne pointe pas vers l'instance du composant) et utilisez une propriété à la place:

function SomeComponent() {
  let button
  return <button ref={el => (button = el)} />
}

Téléchargez mon gratuitManuel React


Plus de tutoriels de réaction: