Comment faire défiler efficacement les éléments dans React ?

Défilement efficace vers les éléments dans React

Dans cet article, nous abordons un défi courant rencontré lors de la gestion du comportement de défilement dans les applications React : garantir que le focus de défilement reste sur les éléments nouvellement chargés. éléments. Nous présentons différentes approches pour y parvenir, adaptées à React 16.3 et 16.8 .

React 16.8 , composant fonctionnel

En utilisant le hook useRef, nous créons une référence pour l'élément souhaité. En appelant la fonction scrollIntoView liée à cette référence, nous faisons défiler en douceur jusqu'à cet élément.

const ScrollDemo = () => {
  const myRef = useRef(null);

  const executeScroll = () => myRef.current.scrollIntoView(); // scroll to element

  return (
    <>
      <div ref={myRef}>Element to scroll to</div>
      <button onClick={executeScroll}>Click to scroll</button>
    </>
  );
};

React 16.3, composant de classe

Pour les composants de classe, nous pouvons créer une référence avec React.createRef (). La méthode executeScroll appelle la fonction scrollIntoView sur la référence pour faire défiler en douceur jusqu'à l'élément souhaité.

class ReadyToScroll extends Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  render() {
    return <div ref={this.myRef}>Element to scroll to</div>;
  }

  executeScroll = () => this.myRef.current.scrollIntoView(); // scroll to element
}

Ref Callback

Alternativement, nous pouvons utiliser un rappel de référence pour attacher la référence à un élément . Cette méthode garantit que la référence est affectée directement à l'élément DOM sans créer de variable d'instance.

class ReadyToScroll extends Component {
  render() {
    return <div ref={ref => (this.myRef = ref)}>Element to scroll to</div>;
  }

  executeScroll = () => this.myRef.scrollIntoView(); // scroll to element
}

Considérations

• Éviter les références de chaîne : Références de chaîne ont des implications en termes de performances et sont déconseillés par React.
• Smooth Scroll Animation : Le défilement fluide peut être activé en ajoutant scroll-behavior: smooth au CSS de l'élément html.
• Passage d'une référence à un enfant : Lors du passage d'une référence à un composant enfant, attribuez-le à un accessoire avec un nom autre que "ref" pour éviter les conflits.

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!