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

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

Vous souhaitez que votre widget de chat se concentre automatiquement sur le dernier message lorsque de nouveaux messages sont chargés. Pour y parvenir, vous devez créer une référence dynamique pour chaque message et utiliser une fonction de défilement pour faire défiler jusqu'au dernier élément.

Voici comment procéder :

React 16.8 , Composant fonctionnel

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

  const executeScroll = () => myRef.current.scrollIntoView(); // run this function from an event handler or an effect 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.
}

Remarques :

• Éviter d'utiliser références de chaîne car elles sont obsolètes.
• Passez la référence à l'élément DOM, pas au composant React.
• Ajoutez du CSS pour activer une animation de défilement fluide.

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!