scrollToBottom 在聊天应用程序中使用 reactjs 获取新消息答案

【问题标题】：scrollToBottom using reactjs in chat app for new messagesscrollToBottom 在聊天应用程序中使用 reactjs 获取新消息
【发布时间】：2020-05-12 16:25:30
【问题描述】：

我想使用反应钩子将屏幕滚动到底部我在 Messages.js 组件中接收到一个消息数组并将每条消息发送到 Message.js 组件以根据用户加载，但我无法实现自动滚动到底部。这是我的代码 Messages.js：

import React from 'react'

import Message from './Message';

function Messages(props) {

    return (
        <div>
            {props.messageDetails.map((message) =>
                <div key={message.Time_Stamp}>
                    {
                        <Message
                            messageBy={message.Sender}
                            messageTime={message.Time}
                            message={message.Message}
                            userName={props.userName}
                        />
                    }
                </div>)
            }
        </div>
    )
}

export default Messages

【问题讨论】：

您可以从SO answer 中获得灵感，我在其中创建了一个以类似聊天的方式发送/列出消息的演示。这是source code 和demo。它不是钩子，而是用类组件和无状态函数实现的。
其实我是新手，所以我想要一些带有钩子的东西。你能编辑代码吗

标签： javascript reactjs react-hooks autoscroll

【解决方案1】：

每次messageDetails 数组更改时，您都必须访问容器 DOM 元素并调用 element.scroll() 函数

import React, { useEffect, useRef } from 'react'
import Message from './Message';

function Messages({messageDetails, userName}) {
    const containerRef = useRef(null);

    useEffect(() => {

      if(containerRef && containerRef.current) {
        const element = containerRef.current;
        element.scroll({
          top: element.scrollHeight,
          left: 0,
          behavior: "smooth"
        })
      }

    }, [containerRef, messageDetails])

    return (
        <div ref={containerRef}>
            {messageDetails.map(({Time_Stamp, Sender, Time, Message}) =>
                <div key={Time_Stamp}>
                        <Message
                            messageBy={Sender}
                            messageTime={Time}
                            message={Message}
                            userName={userName}
                        />
                </div>)}
        </div>
    )
}

export default Messages

【讨论】：

【解决方案2】：

import React, { useEffect } from 'react'
import Message from './Message';

function Messages({messageDetails, userName}) {
    var y = window.scrollY;
    useEffect(() => {
        var element = document.querySelector('.ref');
        window.scroll({
            top: element.scrollHeight,
            left: 0,
        });      
    },[messageDetails])   
    return (
        <div className="ref" >
            {messageDetails.map((message) =>
                <div key={message.Time_Stamp}>
                    {
                        <Message
                            messageBy={message.Sender}
                            messageTime={message.Time}
                            message={message.Message}
                            userName={userName}
                        />
                    }
                </div>)
            }
        </div>
    )
}

export default Messages

【讨论】：