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

Posted 2023-02-16

【中文标题】通过道具 React 将 WS 连接传递给孩子

【英文标题】：Passing WS connection down to children via props React

【发布时间】：2019-03-11 19:11:46

【问题描述】：

我在后端 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 中的子组件？

【问题讨论】：

哇！证明在 SO 上提出问题有时会导致您看到自己犯的错误！当然，我没有从 Input .send 看到控制台中的任何内容，因为我没有在任何地方回显它！仅在 Main 组件中的 ComponentDidMount 上调用 OpenSocket（它正在被回显的地方）。嗬！所以它按预期工作。道歉！

如果您解决了您的问题，请将其发布为答案 :)

【参考方案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: ''
  );
;

【讨论】：

我收到此错误：“DataCloneError：无法在‘历史’上执行‘pushState’：无法克隆 WebSocket 对象。”你能帮忙吗？