reactjs – React Redux：在状态改变后滚动DOM元素

发布时间：2020-12-15 20:31:41 所属栏目：百科来源：网络整理

导读：这里是Redux的新手,真的只是寻找“最佳实践”的答案. 我正在使用React Redux构建聊天应用程序.我的应用程序看起来像这样：我的应用容器,消息列表和输入栏的3个无状态组件添加用户消息/响应的操作一个reducer,它接受这些操作并返回一个消息数组聊天中间件

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

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

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

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

我需要触发的是：messagesListElement.scrollTop = messagesListElement.scrollHeight;,但不确定适当的位置在哪里.

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

> componentWillReceiveProps()
> shouldComponentUpdate()
> componentWillUpdate()
> componentDidUpdate()
> render()

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

为什么不使用componentWillReceiveProps – 这是在新消息即将在组件的新props中传递之前执行的函数.这是更新组件状态与新道具的最佳位置,但由于您的组件是无状态的,因此这不适合滚动. This可能会有所帮助

希望能帮助到你：)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!