[解決済み】reactで一番下までスクロールさせるには？

質問

チャットシステムを構築し、ウィンドウに入った時や新しいメッセージが来た時に自動的に一番下までスクロールさせたいと思っています。Reactでコンテナの底に自動的にスクロールさせるにはどうしたらいいですか？

どのように解決するのですか？

Tusharさんがおっしゃるように、チャットの一番下にダミーのdivをおいておけばいいのです。

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();
}

私は、標準の Element.scrollIntoView というメソッドがあります。