Comment utiliser getElementById en React

Pour obtenir un élément par ID dans React :

• Définissez la prop ref sur l'élément.
• Utilisez la propriété current pour accéder à l'élément dans le hook useEffect.

import {useRef, useEffect} from 'react';

export default function App() {
  const ref = useRef(null);

  useEffect(() => {
    // 👇️ use document.getElementById()
    const el = document.getElementById('my-element');
    console.log(el);

    // 👇️ (better) use a ref
    const el2 = ref.current;
    console.log(el2);
  }, []);

  return (
    <div>
      <h2 ref={ref} id="my-element">
        Some content here
      </h2>
    </div>
  );
}

L'extrait de code montre comment obtenir un élément par ID en utilisant la méthode document.getElementById() et via une référence.

Le hook useRef()peut recevoir une valeur initiale comme argument. Le hook retourne un objet ref mutable dont la propriété .current est initialisée à l'argument passé.

Lorsque nous passons une prop ref à un élément, par exemple <div ref={myRef} />, React définit la propriété .currentde l'objet ref au nœud DOM correspondant.

Nous avons passé un tableau de dépendances vide au hook [object Promise], donc il ne sera exécuté que lorsque le composant sera monté.

useEffect(() => {
  // 👇️ use document.getElementById()
  const el = document.getElementById('my-element');
  console.log(el);

  // 👇️ (better) use a ref
  const el2 = ref.current;
  console.log(el2);
}, []);

Nous avons utilisé le hook useEffect parce que nous voulons nous assurer que la référence a été définie sur l'élément et que l'élément a été rendu dans le DOM.

Vous pouvez également utiliser la méthode document.getElementById si vous n'avez pas accès à l'élément et que vous ne pouvez pas définir une réf prop sur celui-ci.

useEffect(() => {
  // 👇️ use document.getElementById()
  const el = document.getElementById('my-element');
  console.log(el);
}, []);

Vous devez appeler la méthode document.getElementById()dans le hook useEffect ou lorsqu'un événement se produit.

Voici un exemple qui permet d'obtenir un élément par ID lorsqu'un événement se produit.

import {useRef} from 'react';

export default function App() {
  const ref = useRef(null);

  const handleClick = () => {
    // 👇️ use document.getElementById()
    const el = document.getElementById('my-element');
    console.log(el);

    // 👇️ (better) use a ref
    const el2 = ref.current;
    console.log(el2);
  };

  return (
    <div>
      <h2 ref={ref} id="my-element">
        Some content here
      </h2>

      <button onClick={handleClick}>Click</button>
    </div>
  );
}

La sélection d'un élément par ID ou à l'aide d'une ref est également possible dans une fonction de traitement d'événement.

Si vous essayez d'obtenir un élément par ID ou via sa ref directement dans la méthode render de votre composant fonctionnel, l'élément auquel vous essayez d'accéder peut ne pas avoir encore été rendu.
Le hook useEffect s'exécute après que les éléments du composant ont été rendus dans le DOM, donc si un élément avec l'id fourni existe, il sera sélectionné.