通过props React将WS连接向下传递给子对象

// 父组件
import React, { useState, useEffect } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [ws, setWs] = useState(null);

  useEffect(() => {
    // 创建WebSocket连接
    const socket = new WebSocket('ws://example.com');

    // 设置WebSocket连接对象
    setWs(socket);

    // 在组件卸载时关闭WebSocket连接
    return () => {
      socket.close();
    };
  }, []);

  return (
    <div>
      <ChildComponent ws={ws} />
    </div>
  );
};

export default ParentComponent;

// 子组件
import React from 'react';

const ChildComponent = ({ ws }) => {
  // 在需要的地方使用WebSocket连接对象
  const sendMessage = () => {
    if (ws) {
      ws.send('Hello, WebSocket!');
    }
  };

  return (
    <div>
      <button onClick={sendMessage}>发送消息</button>
    </div>
  );
};

export default ChildComponent;