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

回答

相关问题