React + Redux：狀態變化後滾動DOM元素

這裏的新手Redux真的只是尋找「最佳實踐」的答案。React + Redux：狀態變化後滾動DOM元素

我正在使用React + Redux構建聊天應用程序。我的應用程序看起來是這樣的：我的應用程序容器

3無狀態組件，郵件列表，以及輸入欄
操作添加用戶的消息/響應
減速是發生在這些行動並返回消息數組
聊天中間件，其處理然後當ADD_MESSAGE動作分派

到目前爲止好一個發射插座消息。一切都運行良好，但我不確定如何/在這個序列中我應該做DOM操作。具體來說，我想滾動到我的消息狀態變化時，我的message-list容器的底部。

我需要的所有東西都是這樣的：messagesListElement.scrollTop = messagesListElement.scrollHeight;，但不知道在哪裏做適當的位置。

2016-11-20 Nicholas Haley

聽起來你最好的選擇是解除您messageManager組件爲一類，並聆聽'componentDidUpdate' https://facebook.github.io/react/docs /react-component.html#componentdidupdate如果這對你有用，我可以寫出更完整的答案。 – azium

謝謝，這是有道理的，這是我正在考慮的方法。如果可能的話保持我的組件無狀態是很好的，但這看起來像是最好的解決方案 –

你可以用重構幫助器https://github.com/acdlite/recompose – azium

您提到所有三個組件都是無狀態的，這意味着消息在redux存儲中維護，這意味着它們作爲道具傳遞給子組件。基本上有五種生命週期方法可以在組件更新之後/之前觸發。

componentWillReceiveProps（）
shouldComponentUpdate（）
componentWillUpdate（）
componentDidUpdate（）
渲染（）

現在，因爲你要到一個新的消息後，向下滾動被推送到消息狀態，這樣做的最佳位置是componentDidUpdate（）

爲什麼不是componentWillReceiveProps - 這是在組件的新道具中即將傳遞新消息之前執行的函數。這是更新你的組件對抗新道具的狀態的最佳位置，但由於你的組件是無狀態的，所以這不是滾動的正確位置。 This可幫助

希望它能幫助:)

來源

2016-11-20 19:54:19 Swapnil

因此，因爲我使用無狀態組件，所以爲了使用這些組件我假設我應該將我的組件轉換爲使用React.createClass？（據我所知，生命週期方法在無狀態組件中不可用）。感謝您的答覆！ –

有生命週期方法在無狀態組件中不可用，如果你想使用它們，你必須使用** React。在es5或**類中的createClass **擴展了React.Component **。儘管有一個庫爲無狀態組件提供了生命週期方法，但我從未使用它。 [在這裏查看]（https://github.com/davidmarkclements/react-functional）。 – Swapnil

React + Redux：狀態變化後滾動DOM元素

回答

相關問題