Comment accéder aux éléments DOM dans React : un guide des références et des meilleures pratiques ?

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

Dans cet article, nous explorerons les méthodes d'accès aux éléments DOM dans React. React, une bibliothèque JavaScript populaire pour la création d'interfaces utilisateur, propose une approche différente de la gestion du DOM par rapport aux méthodes traditionnelles utilisées dans JavaScript Vanilla. React utilise un DOM virtuel, qui assure le suivi de l'état de l'interface utilisateur, ce qui facilite la mise à jour et la gestion de l'interface utilisateur de manière déclarative.

Alors, comment pouvons-nous accéder à un élément DOM spécifique dans un composant React ? Traditionnellement, en JavaScript Vanilla, nous nous appuyons sur des méthodes telles que document.getElementById() pour cibler et récupérer les éléments DOM. Dans React, il existe plusieurs approches pour y parvenir, et elles ont évolué au fil du temps avec différentes versions de React.

Utilisation des références de chaîne (obsolète) :

Dans les anciennes versions de React, les références de chaîne étaient couramment utilisé pour accéder aux éléments du DOM. Voici comment cela fonctionne :

<Progressbar completed={25}>

Dans cet exemple, l'attribut ref avec la valeur "Progress1" est attaché au composant Progressbar. Pour accéder à l'élément DOM, vous pouvez utiliser :

var object = this.refs.Progress1;

Cependant, cette méthode est considérée comme héritée et est susceptible d'être supprimée dans les futures versions de React. Facebook déconseille d'utiliser des références de chaîne en raison de problèmes potentiels et encourage l'utilisation de méthodes alternatives.

Utilisation du modèle de rappel (recommandé pour React 16.2 et versions antérieures) :

Une approche recommandée pour React 16.2 et plus tôt consiste à utiliser le modèle de rappel, qui permet d'accéder à l'élément DOM directement dans le rendu du composant method:

<Progressbar completed={25}>

Dans cet exemple, l'attribut ref est défini comme une fonction de flèche qui reçoit l'élément DOM en argument (input dans ce cas) et l'attribue à un tableau du composant. Cela permet un accès direct à l'élément DOM au sein du composant.

Utilisation de React.createRef() (React 16.3) :

Dans React 16.3 et versions ultérieures, React.createRef( ) est utilisé pour créer une réf. Vous attribuez généralement la référence créée à une variable d'instance dans le constructeur :

constructor(props) {
  super(props);
  this.myRef = React.createRef();
}

Pour accéder à l'élément DOM, vous pouvez utiliser :

const node = this.myRef.current;

Cette méthode est recommandée pour accéder aux éléments DOM dans React et est considérée comme une bonne pratique.

Utilisation de React.forwardRef() et useRef() (React 16.8 ):

Dans les composants fonctionnels introduits dans React 16.8, vous pouvez utiliser React.forwardRef avec useRef pour créer des références et accéder aux éléments DOM. React.forwardRef est utilisé pour transmettre la référence à l'élément DOM, et useRef est utilisé pour créer la référence :

const Child = React.forwardRef((props, ref) => {
  return <div ref={ref}>Child</div>;
});

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

Pour accéder à l'élément DOM, vous pouvez utiliser :

<Progressbar completed={25}>

Remarque : Les références de chaîne sont déconseillées, il est donc préférable d'utiliser l'une des méthodes recommandées ci-dessus. React propose diverses options pour accéder aux éléments DOM, et le choix dépend de la version de React que vous utilisez.

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!