React TypeScript中如何向其他组件传递socket连接实例

这个TS报错的核心原因是：你给App组件传入socket属性时，TypeScript的类型检查发现App组件的Props类型定义中没有声明socket字段，因此判定该属性传参不合法，抛出类型不匹配错误。

方案1：直接给App组件声明Props类型（适合仅App/少量组件使用socket的场景） #

直接修改App.tsx文件，显式定义组件可接收的Props类型，将socket加入类型声明即可：

// App.tsx
import { Socket } from "socket.io-client";
import { DefaultEventsMap } from "@socket.io/component-emitter";

// 声明组件Props类型
type AppProps = {
  socket: Socket<DefaultEventsMap, DefaultEventsMap>;
};

function App({ socket }: AppProps) {
  // 组件内可直接正常使用socket实例，比如绑定事件、发送消息
  // useEffect(() => {
  //   socket.on("connect", () => console.log("socket连接成功"));
  // }, [socket]);

  return <div>{/* 你的业务组件内容 */}</div>;
}

export default App;

改完之后main.tsx里的<App socket={socket} />传参就不会再报类型错误了。

方案2：通过Context全局注入socket（推荐，适合多组件使用socket的场景） #

socket本身是全局单例，不需要层层通过props传递，用React Context做全局注入可以避免多层传参的繁琐，同时完美适配TS类型检查：

1. 先新建socket相关的上下文文件，比如src/utils/socket.ts：

   import { createContext, useContext } from "react";
   import { io, Socket } from "socket.io-client";
   import { DefaultEventsMap } from "@socket.io/component-emitter";
   
   // 初始化socket实例
   export const socket = io("http://localhost:8081");
   // 创建带类型的Socket上下文
   export const SocketContext = createContext<Socket<DefaultEventsMap, DefaultEventsMap> | null>(null);
   // 封装自定义hook，方便组件内获取socket实例
   export const useSocket = () => {
     const socketInstance = useContext(SocketContext);
     if (!socketInstance) {
       throw new Error("useSocket只能在SocketProvider包裹的组件内使用");
     }
     return socketInstance;
   };
   

2. 修改main.tsx，用Context.Provider包裹根组件，不需要再给App单独传socket prop：

   import React from "react";
   import ReactDOM from "react-dom/client";
   import App from "./App";
   import "./index.css";
   import { SocketContext, socket } from "./utils/socket";
   
   ReactDOM.createRoot(document.getElementById("root")!).render(
     <React.StrictMode>
       <SocketContext.Provider value={socket}>
         <App />
       </SocketContext.Provider>
     </React.StrictMode>
   );
   

3. 后续任意业务组件需要使用socket时，直接调用封装好的useSocket()即可获取带正确类型的socket实例，不需要逐层传参：

   // 任意业务组件内示例
   import { useEffect } from "react";
   import { useSocket } from "./utils/socket";
   
   function ChatRoom() {
     const socket = useSocket();
     
     useEffect(() => {
       socket.on("new_message", (msg) => {
         console.log("收到新消息:", msg);
       });
       return () => {
         socket.off("new_message");
       };
     }, [socket]);
   
     return <div>聊天室</div>;
   }
   

• 如果导入DefaultEventsMap时报错，检查socket.io-client版本，v4.x版本自带该类型，低版本可尝试安装@types/socket.io-client补全类型。
• 不要重复初始化多个socket实例，全局保持单例即可，避免重复建立连接浪费资源。

内容的提问来源于stack exchange，提问作者Primer Cielo