Comment implémenter le défilement d'ancre dans React

Astuce :

Pour implémenter le défilement d'ancre, n'utilisez pas la balise a, car cela provoquerait des sauts de routage.

(Partage vidéo d'apprentissage : tutoriel vidéo React)

Ici, nous utilisons la nouvelle API de H5, scrollToAnchor

La méthode précédente d'utilisation d'une balise :

<a href=&#39;#activity1&#39;></a>    //定义锚点
<div name=&#39;activity1&#39;></div>   //跳转到的锚点
但是在单页面中，这样会进行前端路由的修改

Utilisez l'API scrollToAnchor pour modifier

<a onClick={() => this.scrollToAnchor(name)}></a>    //定义锚点

<div id=&#39;activity1&#39;></div>   //跳转到的锚点
//函数定义
scrollToAnchor = (anchorName) => {
    if (anchorName) {
        // 找到锚点
        let anchorElement = document.getElementById(anchorName);
        // 如果对应id的锚点存在，就跳转到锚点
        if(anchorElement) { anchorElement.scrollIntoView({block: &#39;start&#39;, behavior: &#39;smooth&#39;}); }
    }
  }

bloc : indique le défilement vers le haut ou le bas du point d'ancrage, début/fin

comportement : indique l'effet du défilement , auto/instantané/lisse (effet de défilement)

1. Remplacez l'attribut de nom traditionnel du point d'ancrage par l'attribut id. De cette façon, nous pouvons utiliser la méthode document.getElementById pour interroger facilement le point d'ancrage.

2. Supprimez l'attribut href du bouton rouge d'origine, puis ajoutez une méthode onClick. La méthode onClick transmet l'identifiant d'un point d'ancrage, puis utilise la fonction suivante pour trouver le point d'ancrage et accéder au point d'ancrage.

Recommandations associées : Tutoriel React

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!