Question

上下文

我正在开发一个Ruby On Rails应用程序，我开始使用React.js来管理我的javascript组件。我的应用程序提供类似Facebook的聊天：页面底部显示几个聊天。

问题

我有一个ChatList组件来呈现聊天。聊天消息及其形式。提交此表单后，将向服务器发出AJAX调用以发送消息，并将消息添加到当前聊天中。

this.setState({messages: this.state.messages.concat([newMessage])});

服务器然后将Javascript代码广播给接收者。

这就是我被困住的地方。如何将消息添加到正确的聊天中？如何选择我的React.js组件并更改其“道具”？当我没有使用react时，我曾经将此代码广播给其他用户：

$("#chat-<%= chat.id %>").append("<%= message.content" %>);

我想我必须找到一种方法来选择React组件（聊天实例）并更改其属性“messages”。怎么样？

感谢您的帮助！：）

编辑：我将添加更多信息，以防万一：

我的ChatList是一个全局变量，它接受一个Chats数组。
每个聊天都会收集一组消息和表单。

当我提交聊天表单时，它会将消息添加到聊天室（本地，它还会将新消息发布到服务器）。当服务器收到POST事件时，它可以将javascript代码呈现给其他用户。

此代码应将消息添加到正确用户的正确聊天中。缺少两件：

我不知道如何“选择”聊天。
我不知道如何向此聊天的“messages”数组添加消息。

Answer 1

您希望让聊天组件收听新邮件的WebSocket事件，然后在收到邮件时调用setState。

使用聊天室的标准方法是使用＆＃34;频道＆＃34;每个聊天室订阅。这样，它只会听到来自其关注的对话的传入消息。

查看Socket.io及其制作聊天应用程序的示例。即使你不使用Socket.io，这个例子也是说明性的。

Answer 2

我的聊天课中的解决方案：

componentDidMount: function(){
      this.props.privateChannel.bind('message.new', this.receiveMessage);
  },
receiveMessage: function(message) {
    if(message.user.id == this.props.recipient.id){
      this.setState({messages: this.state.messages.concat([message])});
      this.startBlink();
    }
},

通过websockets将消息添加到聊天组件（react.js）

2 个答案: