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

我想使用react hook将屏幕滚动到底部。我在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

从“React”导入React
从“/Message”导入消息；
功能信息（道具）{
返回(
{props.messageDetails.map（（message）=>
{
}
)
}
)
}
导出默认消息

每次更改数组时，必须访问容器DOM元素并调用

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

import React，{useffect，useRef}来自“React”
从“/Message”导入消息；
函数消息（{messageDetails，userName}）{
const containerRef=useRef（null）；
useffect（（）=>{
if（containerRef&&containerRef.current）{
常量元素=containerRef.current；
元素。滚动({
顶部：element.scrollHeight，
左:0,，
行为：“平稳”
})
}
}，[containerRef，messageDetails]）
返回(
{messageDetails.map（{Time_Stamp，Sender，Time，Message}）=>
)}
)
}
导出默认消息

从“React”导入React，{useffect}
从“/Message”导入消息；
函数消息（{messageDetails，userName}）{
var y=window.scrollY；
useffect（（）=>{
var元素=document.querySelector（'.ref'）；
滚动窗口({
顶部：element.scrollHeight，
左:0,，
});      
}，[messageDetails]）
返回(
{messageDetails.map（（message）=>
{
}
)
}
)
}
导出默认消息

您可以从中获得灵感，我创建了一个以类似聊天的方式发送/列出消息的演示。这是和的。它不是钩子，而是用类组件和无状态函数实现的。事实上，我是新手，所以我想用钩子做点什么。你能编辑代码吗

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