ReactJS、react-router and socket.io

Question

私はReactJS、Express、socket.ioを学びます。ユーザーが部屋に入り、部屋の中でお互いにやり取りできる小さなアプリケーションを作っています（コンテンツNYI）。現在のところ、RoomListビューと個々のRoomビューを持つことが考えられます。ルーム内の現在のユーザー数はRoomListに表示されます（たとえば、Room 1: 2 users）。

私のルータの設定は次のようになります。問題は、私は別のコンポーネントで、ここで作成されたソケットのインスタンスにアクセスする方法を、ある

export default React.createClass({ 
    componentDidMount() { 
    var socket = io.connect('/') 
    socket.on('connect', function(data) { 
     socket.emit('message', "Dududu") 
     socket.on('message', function(data) { 
     console.log("Message:", data); 
     }) 
    }) 
    }, 

    render() { 
    return (
     <div> 
     {this.props.children} 
     </div> 
    ) 
    } 
}) 

：

<Router history={hashHistory}> 
    <Route path="/" component={App}> 
     <Route path="rooms" component={RoomList}></Route> 
     <Route path="rooms/:roomId" component={Room}></Route> 
    </Route> 
</Router> 

とアプリのコンポーネント？たとえば、Roomコンポーネントにルームを参加/退室させるためのソケットイベントを追加したり、RoomListコンポーネントのRoomListのユーザー数を更新したりします。どのようにしてソケットオブジェクトをグローバルに共有できますか？ソケットと複数のコンポーネントを処理するために推奨される方法ですか？

Answer 1

活発なグーグルとgithub問題の検索で何ができるかを知ったAppコンポーネントdo this.setState({socket: socket})で、次にビューのためにソケットを小道具として渡してReact.cloneElementを使ってください。次に、子コンポーネントからthis.props.socketまでソケットにアクセスできます。

export default React.createClass({ 
    componentWillMount() { 
    var socket = io.connect('/'); 
    this.setState({socket: socket}); 
    }, 

    render() { 
    return (
     <div> 
     { 
      React.cloneElement(this.props.children, {socket: this.state.socket}) 
     } 
     </div> 
    ) 
    } 
})