Reactjs 如何滚动到div的底部

我无法向下滚动我的组件。我希望滚动条拇指从一开始就位于chat div的末尾。我不确定这里有什么问题。MessageTo和MessageFrom是用文本表示段落并显示作者姓名的组件。ChatInput是带有发送按钮的文本区域

import React from 'react';
import './index.css';
import MessageFrom from './message-from';
import MessageTo from './message-to';
import ChatInput from './chat-input';
import SimpleBarReact from 'simplebar-react';
import 'simplebar/src/simplebar.css';


class Chat extends React.Component {

    
    componentDidMount() {
        
        this.scrollToBottom();
    }
    componentDidUpdate(){
        this.scrollToBottom()
    }
    scrollToBottom = () => {
        this.el.scrollIntoView({behavior:"smooth"});
    }

    render(){
        
        return(
            <div className="chat" id="slider-container">
                <SimpleBarReact style={{maxHeight: 680}} id="scroll-bar-cont">
                    <div className="messages-container" id="for-slider" >
                        <MessageFrom />
                        <MessageTo />
                        <div style={{ float:"left", clear: "both" }}
                        ref={el => {this.el=el;}}>
                        </div>
                    </div>
                </SimpleBarReact>   
                <ChatInput />
            </div>
        );
    }
}

export default Chat;

从“React”导入React；
导入“./index.css”；
从“”导入消息/从“”导入消息；
将MessageTo从“.”导入到“；将message导入到“；
从“/聊天输入”导入聊天输入；
从“simplebar react”导入SimpleBarReact；
导入'simplebar/src/simplebar.css'；
类Chat扩展了React.Component{
componentDidMount（）{
这个.scrollToBottom（）；
}
componentDidUpdate（）{
this.scrollToBottom（）
}
scrollToBottom=（）=>{
this.el.scrollIntoView（{behavior:“smooth”}）；
}
render（）{
返回(
{this.el=el；}}>
);
}
}
导出默认聊天；

---

它工作得很好。但是它在下一级组件中不起作用。

this.el.current.scrollIntoView（{behavior:'smooth'}）？如果我将this.el.current.scrollIntoView（{behavior:'smooth'}）替换为this.el.scrollIntoView（{behavior:'smooth'}），那么我会得到类型错误：无法读取未定义的属性'scrollIntoView'。我已经试过了选项@öаааааааааааааааааааа1072？div是否在初始装载/渲染时滚动到视图中？@NixoN：可能会有帮助。尝试第一种和第二种解决方案。