scrollToIndex不滾動列表在React虛擬化列表中

Question

使用react-virtualized，當您滾動list並設置相同的scrollToIndex時，它不會滾回到同一索引。

有沒有辦法將列表重置回位置？

Answer 1

這是因爲道具沒有改變。您可以使用scrollToCell或scrollToRow方法（取決於您使用網格還是列表/表）來重新滾動到相同的索引。

Answer 2

由於@brianvaughn也說過，List不再滾動到索引，因爲對react-virtualized list組件的支持沒有改變。

因爲默認情況下所有react-virtualized組件使用shallowCompare，以避免重新繪製，除非props或state已經改變。在更新發生之前，組件不會重新渲染。

解決這個問題的方法是讓react-virtualized知道外部事件發生了變化。這可以通過幾種不同的方式來完成。

也是它，你有兩種方式可以讓react-virtualized知道事情有了變化

的文件中所提及直通道具

即使shallowCompare方法將檢測更改任何道具，他們沒有聲明爲propTypes。這意味着您還可以通過影響單元格渲染的其他屬性來確保檢測到更改。所以你可以通過額外的道具改變，當你發起一個事件時，virtualized列表不會改變任何東西。

<List 
    {...listProps} 
    sortBy={sortBy} 
/> 

公共方法

電網和收集組件可以被強制使用forceUpdate重新呈現。對於表和列表，您需要調用forceUpdateGrid以確保內部網格也被更新。

因此，無論何時您希望更新scrollToIndex，如果它的值沒有從先前的值改變，您可以在列表上調用forceUpdateGrid。

話雖如此，它可能並不是最好的選擇，因爲如果scrollToIndex沒有改變，這是另一個強制滾動事件的選項，這是scrollToRow選項。但是它需要您想要滾動的行纔可見。它的不是，你將無法使用它。

scrollToRow（指數：數）

確保行是可見的。此方法可用於安全地向後滾動 到用戶已滾動的單元格，即使之前滾動到 也是如此。