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

Question

我想使用 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

Answer 1

您必须访问容器 DOM 元素并在每次 messageDetails 数组更改时调用 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

Answer 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

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

scrollToBottom using reactjs in chat app for new messages

javascript

autoscroll

reactjs

react-hooks