javascript - 将套接字连接传递给组件

Question

我有一个使用 socket.io 的反应应用程序，在我的应用程序中我有两条路由（react-router-dom）。登录页面和聊天页面。

在我的登录页面/组件中，我需要定义套接字，const socket =io();以便我可以提交登录表单和 socket.emit 加入事件。然后用户被重定向到聊天页面。

在我的聊天页面中，我还需要访问各种方法和事件的套接字。

但是我认为我认为定义const socket = io();两次会建立另一个联系是正确的？有没有办法可以将套接字连接从登录页面传递到聊天页面？

---

为了清楚...

登录组件：

https://github.com/alienbuild/node-passthe40/blob/master/public/src/components/pages/Login.js

聊天组件：

https://github.com/alienbuild/node-passthe40/blob/master/public/src/components/pages/Chat.js

标签： javascriptreactjssocket.io

Answer 1

您可以使用React Context来在组件之间共享套接字对象。

您需要创建一个上下文并将其导出。

import React from 'react'

const SocketContext = React.createContext()

export default SocketContext

并像使用它一样

import React
import SocketContext from './socket-context'
import * as io from 'socket.io-client'

const socket = io()

const App = props => (
  <SocketContext.Provider value={socket}>
    <YourChildComponent />
  </SocketContext.Provider>
)

export default App

更多信息点击这里