Question

我正在使用React，我正在做一个聊天应用程序。就像你现在一样，每当聊天屏幕上有新消息或任何事件时，最后一个事件/项目/消息应该是焦点，这样用户就不必向下滚动以便在聊天中查找新事件。作为常规聊天应用。

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

我已经完成了这种行为，但只有在用户添加新邮件时才会这样。我需要所有功能，有时聊天说

新用户已添加到聊天

或

用户XXXXX离开了聊天

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

正如我之前提到的，每个新事件都附加到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() }

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

Lifecycle Methods in docs

每次更新道具时，请关注最后一项

1 个答案: