Javascript React自动滚动至聊天容器底部

我正在尝试使用react构建聊天页面。我显然遇到了一个问题，聊天泡泡容器不会在componentDidMount和Update上自动向下滚动到底部

我查阅了之前的问答，但找不到任何合适的解决方案

这是共同组成部分

// renders the text form and all the messages

import React, { Component } from 'react';
import { convo } from '../../data/convo';
import SingleMessage from '../singleMessage/singleMessage';
import StyledForm from './styles';
import moment from 'moment';

class MessageRoom extends Component {

//convo contains the messages
    state = {
        convo,
        message: ''
    };

    handleChange = e => {
        const message = e.target.value;
        this.setState({ message });
    };

    onSubmit = e => {
        e.preventDefault();
        if (this.state.message) {
            const text = {
                message: this.state.message,
                owner: 0,
                date: moment()
            };

            this.setState({ convo: [...this.state.convo, text], message: '' });
        }
    };

    render() {
        return (
            <StyledForm>
                <div className="messages">
                    {this.state.convo.map(text => (
                        <SingleMessage text={text} key={text.date} />
                    ))}
                </div>
                <div>
                    <form
                        onSubmit={e => {
                            this.onSubmit(e);
                        }}
                    >
                        <input
                            type="text"
                            placeholder="Type a message"
                            value={this.state.message}
                            onChange={this.handleChange}
                        />
                        <button type="submit"> Send </button>
                    </form>
                </div>
            </StyledForm>
        );
    }
}

export default MessageRoom;

//呈现文本表单和所有消息
从“React”导入React，{Component}；
从“../../data/conva”导入{conva}；
从“../SingleMessage/SingleMessage”导入SingleMessage；
从“./styles”导入StyledForm；
从“力矩”中导入力矩；
类MessageRoom扩展组件{
//conva包含消息
状态={
护卫队，
消息：“”
};
handleChange=e=>{
const message=e.target.value；
this.setState（{message}）；
};
onSubmit=e=>{
e、 预防默认值（）；
if（this.state.message）{
常量文本={
消息：this.state.message，
所有者：0，
日期:矩()
};
this.setState（{conva:[…this.state.conva，text]，消息：'}）；
}
};
render（）{
返回(
{this.state.conva.map（text=>(
))}
{
本条第（e）款；
}}
>
发送
);
}
}
导出默认消息室；

---

所以请帮助一个兄弟

有一个非常简单的方法可以通过css技巧实现

将Html包装到消息的父div中

<div className="message-holder">
    <div className="message"> //state all message
       ...text goes here
    </div>
</div>

<style>
.message-holder{
   position:absolute;
   bottom:0;
   //if required overflow to scroll add below css
  overflow-y:scroll
  max-height: //whatever is required
}
.message{
   //css style goes here
}
</style>

//声明所有消息
…文本在这里
.留言人{
位置：绝对位置；
底部：0；
//如果需要，请在css下方滚动添加溢出
溢出y：滚动
最大高度：／任何需要的高度
}
.留言{
//css样式在这里
}

有问题问我

//呈现文本表单和所有消息
从“React”导入React，{Component}；
从“../../data/conva”导入{conva}；
从“../SingleMessage/SingleMessage”导入SingleMessage；
从“./styles”导入StyledForm；
从“力矩”中导入力矩；
类MessageRoom扩展组件{
构造函数（）{
超级（）；
此.state={
护卫队，
消息：“”
};
this.mesRef=React.createRef（）；
}
componentDidMount（）{
这个.scrollToBottom（）；
}
scrollToBottom=（）=>{
this.mesRef.current.scrollTop=this.mesRef.current.scrollHeight；
};
handleChange=e=>{
const message=e.target.value；
this.setState（{message}）；
};
onSubmit=e=>{
e、 预防默认值（）；
if（this.state.message）{
常量文本={
消息：this.state.message，
所有者：0，
日期:矩()
};
这是我的国家(
{conva:[…this.state.conva，text]，消息：''}，
() => {
这个.scrollToBottom（）；
}
);
}
};
render（）{
返回(
{this.state.conva.map（text=>(
))}
{
本条第（e）款；
}}
>
发送
);
}
}
导出默认消息室

在容器上放置一个，并在

componentDidMount

中将其滚动到底部<代码>this.ref.current.scrollTop=this.ref.current.scrollHeight你能发送一个代码片段吗！那么current代表什么呢？请注意，在将来的react版本中可能会被删除。