ReactJS : comment faire défiler un élément ?

J'ai un widget de chat qui affiche un tableau de messages à chaque fois que je le fais défiler vers le haut. Le problème que je rencontre actuellement est que le curseur reste fixe en haut lorsque les messages sont chargés, je veux qu'il se concentre sur le dernier élément d'index du tableau précédent. J'ai compris que je pouvais créer des références dynamiques en passant l'index, mais j'ai également besoin de savoir quel type de fonction de défilement utiliser pour y parvenir.

 handleScrollToElement(event) {
    const tesNode = ReactDOM.findDOMNode(this.refs.test)
    if (some_logic){
      //scroll to testNode      
    }
  }

  render() {

    return (
      <div>
        <div ref="test"></div>
      </div>)
  }
Programmation
javascript reactjs ecmascript-6
16 avril 2017 в 8:33
9 vues

Trouvez simplement la position supérieure de l'élément que vous avez déjà déterminé [https://www.w3schools.com/Jsref/prop_element_offsettop.asp][1] puis faites défiler jusqu'à cette position à l'aide de la méthode scrollTo [https://www.w3schools.com/Jsref/met_win_scrollto.asp][2].

Quelque chose comme ceci devrait fonctionner :

handleScrollToElement(event) {
  const tesNode = ReactDOM.findDOMNode(this.refs.test)
  if (some_logic){
    window.scrollTo(0, tesNode.offsetTop);
  }
}

render() {

  return (
    <div>
      <div ref="test"></div>
    </div>)
}

[1] : https://www.w3schools.com/Jsref/prop_element_offsettop.asp [2] : https://www.w3schools.com/Jsref/met_win_scrollto.asp

UPDATE:

depuis React v16.3 le React.createRef() est préféré

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

handleScrollToElement(event) {
  if (){
    window.scrollTo(0, this.myRef.current.offsetTop);
  }
}

render() {

  return (
    <div>
      <div ref={this.myRef}></div>
    </div>)
}
Roman Maksimov
Réponse modifiée 27 octobre 2018 в 2:02
Commentaires (5)

L'utilisation de findDOMNode va être dépréciée à terme.

La méthode préférée est d'utiliser les refs de callback.

github eslint

Afaq Ahmed Khan
Réponse modifiée 11 janvier 2019 в 7:43
Commentaires (1)

Vous pouvez utiliser quelque chose comme componentDidUpdate.

componentDidUpdate() {
  var elem = testNode //your ref to the element say testNode in your case; 
  elem.scrollTop = elem.scrollHeight;
};
Raviteja
Réponse modifiée 9 novembre 2018 в 8:04
Commentaires (3)