自动滚动到消息底部

Question

我正在使用聊天应用程序，每当我输入一条消息时，我都需要滚动到底部才能查看新消息。 因此，像在常规聊天中一样，我需要提供用户无需手动滚动到底部即可看到最新消息的功能。

我正在使用React，有没有CSS方式？ 还是可以告诉我最好的方法？

让我给你看一些代码

这是主要成分

  render () {
    let messages = this.props.chatMessages.map((message) => {
      return <ChatItem info={message.info} me={message.me} player={message.player} message={message.message} />;
    });

    let chatForm;

    if (this.props.mode === 'player') {
      chatForm = <ChatForm onAddMessage={this.addMessage} />;
    }

    return <div className="Chat">
      <ul className="Chat__messages">{messages}</ul>
      <hr />
      <div>{chatForm}</div>
    </div>;
  }

这是ChatItem和ChatForm组件

  render () {
    let item;
    const { message, player, me, info } = this.props;

    if (info) {
      item = <li><em>{message}</em></li>;
    }
    else if (me) {
      item = <li><strong>Me: {message}</strong></li>;
    }
    else {
      item = <li><strong>{player}:</strong> {message}</li>;
    }

    return item;
  }


  render () {
    return <div className="ChatForm">
      <input
        className="ChatForm__input"
        placeholder="Your message..."
        ref="newMessage"
        onKeyDown={this.onKeyDown}
        autofocus="true" />
    </div>;
  }

添加信息

我需要这样的东西http://codepen.io/TimPietrusky/pen/ylkFs

看这部分

  // Scroll the latest line of output
  output.scrollTop(
    output[0].scrollHeight - output.height()
  );

我该如何适应React上的代码？

Answer 1

一种方法是在生命周期事件（例如componentDidUpdate ）中比较当前和上一个/下一个道具，如果添加了新消息，则滚动到底部。 例如：

componentDidUpdate(prevProps) {
  // Check if new message was added, for example:
  if (this.props.messages.length === prevProps.messages.length + 1) {
    // Scroll to bottom
  }
}