React + Redux:状态更改后滚动DOM元素

Nic*_*ley 6 reactjs redux

这里是Redux的新手,真的只是寻找"最佳实践"的答案.

我正在使用React + Redux构建聊天应用程序.我的应用程序看起来像这样:

  • 我的应用容器,消息列表和输入栏有3个无状态组件
  • 添加用户消息/响应的操作
  • 一个reducer,它接受这些操作并返回一个消息数组
  • 聊天中间件,在调度ADD_MESSAGE操作时处理发出套接字消息

到现在为止还挺好.一切都运行良好,但我不确定在这个序列中我应该如何/在哪里进行DOM操作.具体来说,message-list每当我的消息发生变化时,我都想滚动到容器的底部.

我需要解雇的是:messagesListElement.scrollTop = messagesListElement.scrollHeight;但不确定适当的地方在哪里.

Swa*_*nil 4

您提到所有三个组件都是无状态的,这意味着消息保存在 redux 存储中,这意味着它们作为 props 传递给子组件。基本上有五种生命周期方法可以在组件更新之后/之前触发。

  • 组件WillReceiveProps()
  • 应该组件更新()
  • 组件WillUpdate()
  • 组件DidUpdate()
  • 使成为()

现在,由于您想在将新消息推送到消息状态后向下滚动,因此最好的位置是componentDidUpdate()

为什么不呢 componentWillReceiveProps - 这是将在新消息即将传递到组件的新 props 之前执行的函数。这是根据新 props 更新组件状态的最佳位置,但由于组件是无状态的,因此这不是滚动的正确位置。可能会有帮助

希望能帮助到你 :)