Comment accéder aux éléments DOM dans React sans utiliser « document.getElementById() » ?

Comment accéder à un élément DOM dans React ? Quel est l'équivalent de document.getElementById() dans React ?

L'accès aux éléments DOM dans React diffère de la méthode conventionnelle document.getElementById() dans Vanilla JavaScript. React propose plusieurs approches pour sélectionner des éléments DOM.

React Refs

Refs vous permettent de créer une référence à un élément DOM dans un composant React. Cette référence peut être utilisée ultérieurement pour accéder au nœud DOM.

Modèle de rappel (recommandé)

Dans React 16.2 et versions antérieures, une méthode recommandée pour utiliser les références consiste à utiliser le modèle de rappel :

<Progressbar completed={25}>

Cela crée une fonction de rappel qui reçoit le nœud DOM comme argument et l'assigne au tableau Progress dans le fichier du composant. state.

Références de chaîne

Les références de chaîne sont considérées comme héritées et leur utilisation n'est pas recommandée. Cependant, ils peuvent toujours être utilisés dans les anciennes versions de React.

<Progressbar completed={25}>

Pour accéder à l'élément DOM, utilisez :

var object = this.refs.Progress1;

Notez que les références de chaîne peuvent être supprimées dans les futures versions de React.

React.createRef()

Dans React 16.3 et versions ultérieures, utilisez React.createRef() pour créer une référence.

constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }

Pour accéder à l'élément DOM, utilisez :

const node = this.myRef.current;

React Hook : useRef

Dans les composants de fonction ( introduit dans React 16.8), utilisez le hook useRef pour créer une référence.

const childRef = useRef(null);
return <div ref={childRef} />;

Pour accédez à l'élément DOM, utilisez :

const node = childRef.current;

En utilisant ces méthodes, vous pouvez accéder et manipuler les éléments DOM dans les composants React, permettant un contrôle plus granulaire sur les interactions et les fonctionnalités de votre application Web.

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!