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元素

回答

相关问题