Question

我正在后端PHP服务器上使用Ratchet来运行我的websocket，并且我将React作为前端。

我打开了套接字，可以通过JS连接而没有问题。

我遇到的问题是我似乎无法将websocket连接传递给任何子组件。

例如，我有一个包含3个子组件的聊天组件：

Main（整个包装），Closed（弹出式聊天框的关闭状态），Open（显示所有消息等）和Input （用于处理新消息的表单输入部分）。

初始化websocket的最合乎逻辑的地方是Main组件，所以我这样做了，然后将连接传递到Open子组件：

componentDidMount() {
  this._isMounted = true;
  this.openWebsocket();
}

openWebsocket = () => {
  this.conn = new WebSocket('ws://localhost:8080');
  this.conn.onopen = () => {
    console.log('Connected!');
  };

  this.conn.onmessage = e => {
    console.log(e.data);
  };
};

......

<Open
   conn={this.conn}
/>

然后在Open中将其传递到Input组件（它是Open的子组件）：

<Input conn={this.props.conn} />

......

Open.propTypes = {
  conn: PropTypes.func.isRequired
}

最后在Input中，我尝试使用它：

this.props.conn.send(this.state.msg);

......

Input.propTypes = {
  conn: PropTypes.func.isRequired
}

它会引发错误...

如果我尝试要求conn作为func PropType，（如上所述），它表示提供了一个对象。如果我要求conn作为object，则什么也没有发生。没有错误，但是conn的{{1}}函数显然没有被调用。

接下来，我尝试传递.send函数作为道具：

.send

但是会引发<Open conn={this.conn.send} />错误！

那么您如何将Websocket连接向下传递给React中的子组件？

Answer 1

答案很简单，当我重新读完我的问题后，答案突然跳了起来，我感到有点傻。

基本上所有事情都按预期运行，仅记录Proptype就是object。我只是没有读我在前端代码中任何地方发送回客户端的响应。 onmessage是缺少的链接。就我而言，我试图检测客户端是否在输入框中键入内容，这将更新组件的状态并将其传递给相关的子组件。 3秒后，我还在这里使用setTimeout清除状态。同样不要忘记JSON.parse来自网络套接字的响应。

this.conn.onmessage = e => {
  if (e.data) {
    let data = JSON.parse(e.data);
    if (data.action === 'typing') {
      this.setState({
        isTyping: data.msg
      });
      setTimeout(this.clearIsTyping, 3000);
    }
  }
};

clearIsTyping = () => {
  this.setState({
    isTyping: ''
  });
};

通过道具React

1 个答案: