如何通过Context API将单套接字IO实例传递给页面？

// 创建Context对象
const SocketContext = React.createContext();

// 应用程序的顶层组件
class App extends React.Component {
  constructor(props) {
    super(props);
    // 创建套接字IO实例
    this.socket = new SocketIO();
  }

  render() {
    // 使用Provider组件将套接字IO实例传递给Context
    return (
      <SocketContext.Provider value={this.socket}>
        <MainComponent />
      </SocketContext.Provider>
    );
  }
}

// 需要访问套接字IO实例的组件
class MyComponent extends React.Component {
  render() {
    return (
      // 使用Consumer组件获取Context中的套接字IO实例
      <SocketContext.Consumer>
        {socket => (
          // 在这里可以使用套接字IO实例进行操作
          <div>
            <button onClick={() => socket.send('Hello')}>Send Message</button>
          </div>
        )}
      </SocketContext.Consumer>
    );
  }
}