У меня есть два компонента (Chat.js Phone.js) и контейнер (Full.js)
Я использую следующие версии: реагировать 16.1.1, реагировать-маршрутизатор-дом: 4.2.2.
Ниже приведены мои файлы:
Full.js
class Full extends React.Component {
render () {
return(<Switch>
<Route path="/phone" name="Phone" component={Phone} />
<Route path="/chat" name="Chat" component={Chat} />
</Switch>)
}
}
Chat.js
class Chat extends React.Component {
render () {
return(<div>
<div>Some chat code...</div>
</div>);
}
}
Phone.js
class Phone extends React.Component {
state = {incomingCall : false}
componentDidMount() {
this.socket.on('incomingCall', () => {
//Incoming call code
//state changes and triggers notification div
this.setState({incomingCall : true});
});
}
render () {
return(<div>
<div>Notification div (Displays when incomingCall === true)</div>
</div>);
}
}
Компонент телефона получает входящий вызов через сокет io и обновляет состояние, а затем показывает уведомление div. Моя проблема в том, что когда я нахожусь на странице чата, я не могу узнать входящий новый вызов, потому что я не на странице телефона.
Я попытался поместить код сокета io (код входящего вызова) в Full.js (контейнер), он показывает уведомление, но затем, когда я перехожу на страницу телефона, компонент телефона (который также имеет код ввода сокета входящего вызова) не отображал входящий уведомление о вызове, потому что компонент смонтирован, и все состояния имеют начальные значения (изначально входящий вызов будет ложным).
Есть ли способ достичь этого? Спасибо.