javascript - 每次更新 Prop 时都专注于最后一项

Question

我正在使用 React，并且正在开发一个聊天应用程序。就像您现在一样，每次聊天屏幕中出现新消息或任何事件时，最后一个事件/项目/消息都应该成为焦点，这样用户就不必向下滚动以在聊天中查找新事件。作为常规聊天应用程序。

每个事件都附加到this.props.chatMessages .

我已经完成了此行为，但仅当用户添加新消息时才完成。我需要这个功能来完成所有事情，有时聊天会说

New user was added to the chat

或

User XXXXX leaved the chat

所以，这些是不同的事件，这些是信息性消息，而不是常规的用户消息。

正如我之前提到的，每个新事件都附加到 this.props.chatMessages

这就是我所做的，以便当用户自己发送消息时将注意力集中在最后一条消息

  constructor (props) {
    super(props);
    this.addMessage = this.addMessage.bind(this);
    this.focusOnLastMessage = this.focusOnLastMessage.bind(this);
    ChatActions.connect({ socketUrl : this.props.socket, mode : this.props.mode, room : this.props.room, user : this.props.user });
  }

  addMessage (text) {
    if (text.length) {
      ChatActions.addMessage(text);
      this.focusOnLastMessage();
    }
  }

  focusOnLastMessage () {
    console.log(this.props.chatMessages);
    let lastMessage = React.findDOMNode(this.refs.messages);
    lastMessage.scrollTop = lastMessage.scrollHeight;
  }

在渲染方法中我有这样的东西

chatForm = <ChatForm onAddMessage={this.addMessage} />;

这里是完整的功能，以防万一。你在哪里看到<ChatItem .../>因为这是可视化聊天中发生的每个新事件的组件。

class ChatView extends React.Component {

  static getStores () {
    return [ ChatStore ];
  }

  static getPropsFromStores () {
    return ChatStore.getState();
  }

  constructor (props) {
    super(props);
    this.addMessage = this.addMessage.bind(this);
    this.focusOnLastMessage = this.focusOnLastMessage.bind(this);
    ChatActions.connect({ socketUrl : this.props.socket, mode : this.props.mode, room : this.props.room, user : this.props.user });
  }

  addMessage (text) {
    if (text.length) {
      ChatActions.addMessage(text);
      this.focusOnLastMessage();
    }
  }

  focusOnLastMessage () {
    console.log(this.props.chatMessages);
    let lastMessage = React.findDOMNode(this.refs.messages);
    lastMessage.scrollTop = lastMessage.scrollHeight;
  }

  render () {
    let messages = this.props.chatMessages.map((message) => {
      return <ChatItem info={message.info} me={message.me} player={message.player} message={message.message}
              onNewEvent={this.focusOnLastMessage} />;
    }), chatForm, hr, dealerPlayerMessages, dealerPlayerBox, minusPlusButtons;

    if (this.props.mode === 'player') {
      dealerPlayerMessages = <ul ref="messages">{messages}</ul>;
      hr = <hr />;
      chatForm = <ChatForm onAddMessage={this.addMessage} />;
      dealerPlayerBox = <div>{dealerPlayerMessages}{hr}{chatForm}</div>
    }

    if (this.props.mode === 'dealer') {
      minusPlusButtons = <MinusPlusButtons />
      dealerPlayerMessages = <ul ref="messages">{messages}</ul>;
      dealerPlayerBox = <div> {minusPlusButtons} {dealerPlayerMessages}</div>
    }

    return <div>
      {dealerPlayerBox}
    </div>;
  }
}

那么，我应该怎么做才能听到this.props.chatMessages中的每一个变化？为了专注于聊天中的每个新项目？

Answer 1

我只是在这里猜测，但假设有一个新人加入聊天，更新 this.props.chatMessages 以包含一条新消息，通知用户此更改。这意味着第一个生命周期方法将被触发

componentWillReceiveProps (nextProps) {
  // do something with new message
}

但是您需要在将消息绘制到 dom 后滚动消息，所以幸运的是，也有一个生命周期方法。

componentDidUpdate (prevProps, prevState) {
  // dom has been updated with new message, scroll your screen!
  this.focusOnLastMessage()
}

编辑:您可能需要在构造函数中绑定(bind) this 才能使用 this，但我不记得了。并非所有生命周期方法都需要它。

Lifecycle Methods in docs