Faire défiler vers un élément particulier en utilisant l'ID de cet élément dans react ?

Question

J'essayais de faire défiler les éléments d'une ligne particulière dans react en utilisant l'ID de cet élément. J'ai l'ID de la ligne particulière mais je ne peux pas m'y déplacer.

goToViolation=(id)=>{
  const violation = id ; 
  window.scrollTo({
    top:violation.current.offsetTop,
    behavior:"smooth"});
};

 if (isDrillDown) {
        isRowSelected = index === rowIndex % 20;
       if(isRowSelected){
        this.goToViolation(row.id);
       }
      }

1. Je récupère l'ID de cette condition et je le passe à la fonction ci-dessus et j'utilise la fonction scrollTo.

Answer 1

Pour faire défiler un élément, vous avez besoin de la référence de cet élément.

<div onClick={this. goToViolation("row-id")} id="row-id"></div>

Ensuite, dans votre fonction

goToViolation=(id)=>{
  const violation = document.getElementById(id); 
  window.scrollTo({
    top:violation.current.offsetTop,
    behavior:"smooth"
`});
};

Mais cette approche n'est pas référencée, utilisez plutôt les références pour exploiter pleinement les avantages de react.

Answer 2

Je suis d'accord avec @MuhammadAsad que la manipulation directe du DOM n'est pas une manière React.

Au lieu de cela, vous pouvez utiliser useRef et transmettez la référence à votre élément JSX.

Après cela, vous pouvez récupérer la référence DOM à partir de .current propriété.

Alors vous pouvez simplement faire

**your ref**.current.scrollIntoView({ behavior: "smooth", block: "start" });

Exemple,

Votre déclaration de variable.

const violationRef = useRef(null);

Votre élément JSX vers lequel vous souhaitez faire défiler les données.

<div ref={violationRef} ></div>

Votre bouton qui liera l'événement onClick.

<button onClick={goToViolation} />

Votre fonction de gestionnaire

const goToViolation=(id)=>{
  violationRef.current.scrollIntoView({ behavior: "smooth", block: "end" });
};