react 底部增加div时，自动滑动到底部

stackoverflow链接

使用场景： 例如聊天时，在页面中增加div，此时页面并不会自动滑动到底部，如果想要让页面自动滑动到底部可以使用这种做法。

思想

思想实际上很简单，让新增加的模块可见，不过要注意的是似乎不是以模块中间为基准的可见，如果模块超过屏幕，似乎也不能达到很好的效果。关于这一点我并没有找到详细的说法，如果有朋友知道是怎么回事，迫切的希望能够告诉我。

2020 05 17更新，关于不已元素为基准问题，可以考虑计算元素高度，然后滑动滚动条的方式，以元素中心为基准。

Tips

以下代码是从stackoverflow上搬运的来，如果想要了解更加详细的内容可以点击页面中最上方的stackoverfow链接，看看他们的讨论吧~~

render () {
  return (
    <div>
      <div className="MessageContainer" >
        <div className="MessagesList">
          {this.renderMessages()}
        </div>
        <div style={{ float:"left", clear: "both" }}
             ref={(el) => { this.messagesEnd = el; }}>
        </div>
      </div>
    </div>
  );
}

scrollToBottom = () => {
  this.messagesEnd.scrollIntoView({ behavior: "smooth" });
}

componentDidMount() {
  this.scrollToBottom();
}

componentDidUpdate() {
  this.scrollToBottom();
}