ReactJS, реактивный маршрутизатор и socket.io

Question

Я изучаю ReactJS, Express и socket.io, создавая небольшое приложение, в котором пользователи могут вступать в комнаты и взаимодействовать друг с другом внутри комнаты (контент NYI). В настоящее время идея состоит в том, чтобы иметь представление RoomList и индивидуальный вид в комнате. Количество пользователей в комнате должно быть видимым в RoomList (например, Room 1: 2 users).

Мой маршрутизатор конфигурации выглядит следующим образом:

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

И компонент App:

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

Проблема в том, как я могу получить доступ к экземпляру сокет, созданный здесь в другом компоненте? Например, я хотел бы добавить события сокета для присоединения/выхода из комнаты и других событий, связанных с комнатой в компоненте «Комната», обновления счетчика RoomList в компоненте RoomList и т. Д. Как я могу совместно использовать объект сокета глобально или что является рекомендуемой практикой для работы с сокетами и несколькими компонентами?

Answer 1

Обнаружили, что делать с помощью энергичного поиска в googling и github, в компоненте приложения 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> 
    ) 
    } 
})