通过道具 React 将 WS 连接传递给孩子

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 函数作为道具传递：

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