reactjs - 渲染 React 时将 div 滚动到底部

Question

我在用 React 编写的聊天应用程序中有一个消息 div。我希望在用户第一次加载页面时将 div 滚动到底部以查看最新消息。我该如何实施？

标签： reactjs

Answer 1

您可以使用useLayoutEffect钩子查看您的 div 何时呈现并使用对您的 div 元素的引用来滚动到结束

const Messages = () => {
    const divRef = useRef();

    ...
    
    useLayoutEffect(() => {
        if (divRef.current) 
            divRef.current.scrollTop = divRef.current.scrollHeight;
    }, [divRef]);
    
    ...
    
    return (
        <div ref={divRef}>
        ...
        </div>
    );
};