ReactJS，react-router和socket.io

我正在學習ReactJS，Express和socket.io，通過製作一個小應用程序，用戶可以在其中加入房間，並在房間內部互相交互（內容爲NYI）。目前，這個想法是有一個RoomList視圖和一個單獨的房間視圖。房間中當前用戶的數量應該在RoomList中可見（例如，Room 1: 2 users）。ReactJS，react-router和socket.io

我的路由器的配置是這樣的：

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

和應用程序組件：

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> 
    ) 
    } 
})

的問題是，我怎麼能訪問另一個組件在這裏創建了Socket實例？例如，我想在Room組件中添加套接字事件以加入/離開房間和其他房間特定的事件，更新RoomList組件中的RoomList的用戶數。我如何共享全局的套接字對象，或者什麼是處理套接字和多個組件的推薦做法嗎？

來源

2016-11-09 Fissio

找到了通過大量的Google搜索和github問題搜索做什麼，在App組件中執行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> 
    ) 
    } 
})

來源

2016-11-10 09:12:56 Fissio

ReactJS，react-router和socket.io

回答

相關問題