componentDidUpdate滾動至底部時，項目加載

我有一個名單，我想滾動至底部，我有我的部分編碼這樣componentDidUpdate滾動至底部時，項目加載

class Msg extends Component { 

    componentDidUpdate() { 

     if(this.container){ 
      this.container.scrollTop = this.container.scrollHeight 
     } 
    } 

    render() { 
     return(
      <div ref={elem = this.container = elem}> 
       <Item /> 
       <Item /> 
       <Item /> 
      </div> 
     ) 
    } 
}

它的工作。但問題是每當組件重新提交時它都會滾動。 Msg有很多子組件，觸發子組件的狀態會導致Msg組件再次呈現，如何解決這個問題？

解釋它像一個正常的用戶：

用戶向上滾動列表，然後單擊下拉某處時，componentDidUpdate觸發，造成滾動底部。

來源

2017-07-17 Jessie Anderson

所以，當你想在添加一個新的項目它向下滾動網頁...？我建議在UX中添加一個新按鈕，以允許用戶在需要時向下滾動。 – camou

@camou在whatssap的味精，你看到一個按鈕來做到這一點？ –

不，但是當我在iOS9.2上滾動時，WhatsApp不會強迫我停下來。那麼，您何時想要向下滾動，何時出現新消息或用戶在最後幾秒內停止滾動？ – camou

要在組件呈現時第一次滾動到底部，應使用componentDidMount生命週期掛鉤。

如果您希望列表在每次添加元素時滾動，您可以使用現在使用的componentDidUpdate鉤子，但不是每次都操作滾動頂部，請檢查您正在渲染的項目數是否已更改。現在，您每次更新組件時都要設置滾動條頂部。

componentDidUpdate得到雙方先前的道具和以前的狀態參數，所以你可以寫這樣的事情：

componentDidUpdate(prevProps, prevState) { 
    if (this.props.items.length > prevProps.items.length) { 
     this.refs.container.scrollTop = this.refs.container.scrollHeight; 
    } 
}

下面是一個很好的參考反應週期掛鉤：http://busypeoples.github.io/post/react-component-lifecycle/

來源

2017-07-17 05:06:24 Matti

把這個'this.refs.container.scrollTop = this.refs.container.scrollHeight;'在componentDidMount中不起作用 –

你在列表中渲染什麼？例如。在componentDidMount期間，scrollHeight可能仍然爲零，因爲圖像尚未加載並且不佔用容器中的空間。 – Matti

圖片和文字。 –

使用這樣的事情加在列表

<div ref="blankdiv"></div>

結束空白格

然後在每一個componentDidMount滾動這個div在屏幕

this.refs.blankdiv.scrollIntoView()

來源

2017-07-17 06:26:49

componentDidUpdate滾動至底部時，項目加載

回答

相關問題