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

Question

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

NN:   noun, singular 'desk'
NNS:  noun plural   'desks'
NNP:  proper noun, singular 'Harrison'
NNPS: proper noun, plural   'Americans'

如果套接字是通过路由器传递的，则无法使用

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

如果我尝试在SomeComponent中使用套接字（例如：<Route path='/somepath' socket={socket} component={SomeComponent}/> ），则会破坏应用程序，因为套接字在SomeComponent中未定义。

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

对此表示感谢。

Answer 1

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

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

注意：{...props}正在传递给访问路由器道具，例如位置，历史记录，比赛等。

在SomeComponent中：

// to access socket props
this.props.socket

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

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