Comment faire défiler jusqu'à un élément dans React ?

Défiler jusqu'à un élément dans React

Dans React, les développeurs peuvent rencontrer des situations dans lesquelles ils souhaitent faire défiler dynamiquement jusqu'à un élément spécifique, comme dans un widget de discussion où les messages chargés doivent être mis en évidence. Pour y parvenir, plusieurs techniques peuvent être utilisées :

React 16.8, composant fonctionnel

En utilisant le hook useRef, vous pouvez créer une référence dynamique à l'élément vers lequel vous souhaitez faire défiler :

const myRef = useRef(null);

const executeScroll = () => myRef.current.scrollIntoView();

Une fois la référence établie, vous pouvez invoquer la fonction executeScroll() depuis un gestionnaire d'événements ou au sein d'un effet pour effectuer le défilement.

React 16.3 , Class Component

Pour les composants de classe, vous disposez de deux options :

Option 1 : Utilisation de createRef

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

Option 2 : Rappel de référence

render() {
  return <div ref={ (ref) => this.myRef=ref }></div>
}

Dans les deux cas, vous pouvez utiliser this.myRef.scrollIntoView() pour faire défiler jusqu'à l'élément.

Avertissements

• Évitez d'utiliser des références de chaîne car elles sont obsolètes et peut avoir un impact sur les performances.
• Activez le défilement fluide en ajoutant le CSS suivant au document :

html {
  scroll-behavior: smooth;
}

Passer la référence au composant enfant

Si l'élément que vous souhaitez vers lequel faire défiler se trouve dans un composant enfant, vous pouvez utiliser la technique suivante :

const MyComponent = () => {
  const myRef = useRef(null)
  return <ChildComponent refProp={myRef}></ChildComponent>
}

const ChildComponent = (props) => {
  return <div ref={props.refProp}></div>
}

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!