如何在反应中滚动到底部？

Question

我想构建一个聊天系统，并在进入窗口和收到新消息时自动滚动到底部。如何在React中自动滚动到容器的底部？

Answer 1

正如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方法。