在 React 应用程序中使用相同的套接字实例答案

【问题标题】：Use same instance of socket across React application在 React 应用程序中使用相同的套接字实例
【发布时间】：2019-03-06 03:45:55
【问题描述】：

目标是在应用启动时在 App.js 中启动一个套接字连接，然后使这个确切的套接字实例可用于其他加载了 Router 的组件。在线研究建议将套接字传递给嵌套组件，如下所示：

const socket = io();
...
render() {
return(<div className="App"><NestedComponent socket={socket} /></div>)
}

如果套接字是通过路由器传递的，这不起作用

<Route path='/somepath' socket={socket} component={SomeComponent}/>

如果我尝试在 SomeComponent 中使用套接字（例如：this.props.socket.emit('hi', {})），这会破坏应用程序，因为在 SomeComponent 中未定义套接字。

我无法找到一个可行的解决方案来通过路由器传递相同的套接字实例，或者使用 Redux 使套接字成为应用程序状态的一部分并将其提供给较低级别的组件。

非常感谢您对此的任何意见。

【问题讨论】：

【解决方案1】：

您可以使用渲染方法并像这样传递套接字：

<Route path='/somepath' 
  render={(props) => (<SomeComponent socket={socket} {...props} />)} />

注意：{...props} 被传递以访问位置、历史、匹配等路由器属性。

在某些组件中：

// to access socket props
this.props.socket

所以，现在应该可以正常工作了：

this.props.socket.emit('hi', {})

【讨论】：