javascript - 通过 props React 将 WS 连接传递给 child

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的 .send函数显然没有被调用。

接下来我尝试传递 .send而是作为 Prop 发挥作用:

<Open
   conn={this.conn.send}
/>

但是抛出一个 Illegal invocation错误!

那么如何将 websocket 连接传递给 React 中的子组件呢？

Answer 1

答案很简单，当答案突然出现在我面前时，我重新阅读了我的问题后感到有点傻。

基本上一切都按预期工作，只是为了记录Proptype肯定是object .我只是没有在前端代码的任何地方阅读我发送回客户端的响应。 onmessage是缺失的环节。在我的例子中，我试图检测客户端是否在输入框中输入，这将更新组件的状态并将其传递给相关的子组件。我也在使用 setTimeout这里要在 3 秒后清除状态。
也不要忘记JSON.parse来自 websocket 的响应。

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: ''
  });
};