ReactJS bir öğeye nasıl kaydırılır

Her yukarı kaydırdığımda bir dizi mesajı çeken bir sohbet widget'ım var. Şu anda karşılaştığım sorun, mesajlar yüklendiğinde kaydırıcı üstte sabit kalıyor, önceki diziden son dizin öğesine odaklanmasını istiyorum. İndeksi geçerek dinamik refs yapabileceğimi anladım, ancak bunu başarmak için ne tür bir kaydırma işlevi kullanacağımı da bilmem gerekiyor

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

  render() {

    return (
      <div>
        <div ref="test"></div>
      </div>)
  }
Programlama
javascript reactjs ecmascript-6
2017ösp33ös20 Nisan 2017 в 8:33
23 görünümler

Daha önce belirlediğiniz öğenin en üst konumunu bulun https://www.w3schools.com/Jsref/prop_element_offsettop.asp ve ardından `scrollTo' yöntemiyle bu konuma kaydırın https://www.w3schools.com/Jsref/met_win_scrollto.asp

Bunun gibi bir şey işe yaramalı:

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>)
}

GÜNCELLEME:

React v16.3*** sürümünden beri React.createRef() tercih edilmektedir

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
Edited answer 2018ösp2ös14 Ekim 2018 в 2:02
Yorumlar (5)

findDOMNode kullanımı eninde sonunda kullanımdan kaldırılacaktır.

Tercih edilen yöntem geri arama reflerini kullanmaktır.

github eslint

Afaq Ahmed Khan
Edited answer 2019ööp43öö7 Ocak 2019 в 7:43
Yorumlar (1)

ComponentDidUpdate` gibi bir şey kullanabilirsiniz

componentDidUpdate() {
  var elem = testNode //your ref to the element say testNode in your case; 
  elem.scrollTop = elem.scrollHeight;
};
Raviteja
Edited answer 2018ööp4öö8 Kasım 2018 в 8:04
Yorumlar (3)