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

Comment faire défiler automatiquement jusqu'à un élément spécifique ?

Problème :

Dans un widget de chat, les nouveaux messages devraient automatiquement faire défiler la vue à mesure que l'utilisateur fait défiler vers le haut. Cependant, le curseur reste fixe en haut lors du chargement de nouveaux messages, ce qui rend difficile la visualisation des derniers.

Solution :

Pour faire défiler jusqu'à un élément spécifique lorsque de nouveaux messages sont ajoutés, suivez ces étapes :

React 16.8, composant fonctionnel

const ScrollDemo = () => {
  const myRef = useRef(null);
  const executeScroll = () => myRef.current.scrollIntoView(); // Run this function to execute scroll
  return (
    <>
      <div ref={myRef}>Element to scroll to</div>
      <button onClick={executeScroll}>Click to scroll</button>
    </>
  );
};

React 16.3, Composant de classe

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(); // Run this method to execute scrolling
}

Composant de classe - Rappel de référence

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

  executeScroll = () => this.myRef.scrollIntoView(); // Run this method to execute scrolling
}

Éviter les références de chaîne :

Les références de chaîne sont déconseillées en raison des performances problèmes, manque de composabilité et suppression potentielle dans le futur React versions.

Facultatif : Animation de défilement fluide :

Pour une expérience de défilement fluide, ajoutez le CSS suivant à l'élément html :

html {
  scroll-behavior: smooth;
}

Passer une référence à un enfant :

Pour attacher une référence à un élément DOM spécifique dans un composant enfant :

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

Au sein du composant ChildComp :

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

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!