在React應用程序中使用套接字的相同實例

Question

目標是在應用啟動時在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將套接字作為應用程序狀態的一部分並將其提供給較低級別​​的組件。

非常感謝對此的任何投入。

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', {})