Javascript 如何在react js中尚未装入的组件中显示通知

我有两个组件（Chat.js Phone.js）和一个容器（Full.js） 我正在使用以下版本：react 16.1.1，react路由器dom: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>)
   }
 }

类完全扩展React.Component{
渲染（）{
返回(
)
}
}

Chat.js

 class Chat extends React.Component {
   render () {
   return(<div>
     <div>Some chat code...</div>
   </div>);
   }
 }

类聊天扩展React.Component{
渲染（）{
返回(
一些聊天代码。。。
);
}
}

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

class.com组件{
状态={incomingCall:false}
componentDidMount（）{
this.socket.on（'incomingCall'，（）=>{
//来电代码
//状态更改和触发器通知div
this.setState（{incomingCall:true}）；
});
}
渲染（）{
返回(
通知div（incomingCall==true时显示）
);
}
}

电话组件通过套接字io接收来电并更新状态，然后显示通知div。我的问题是当我在聊天页面上时，我无法知道新来电，因为在am中不在电话页面上

我试着在Full.js（Container）上放置套接字io代码（incomingCall code），它会显示通知，但当我转到电话页面时，电话组件（也有incomingCall套接字io代码）不会显示传入呼叫通知，因为组件已安装，并且所有状态都有初始值（incomingCall最初将为false）

---

有没有办法做到这一点？谢谢。

这个问题有很多解决方案。 这里有一个建议 将插座读数与两个组件（电话、聊天室）分离。 创建一个类，负责读取套接字数据并将数据存储在

---

数组。Chat和phone两个类都将从socketReader类中读取。我将使socket reader类成为单例。

有许多解决方案。 这里有一个建议 将插座读数与两个组件（电话、聊天室）分离。 创建一个类，负责读取套接字数据并将数据存储在

---

数组。Chat类和phone类都将从socketReader类中读取。我将使socket reader类成为singleton类。

我将

socket

放置在

完整的
组件中，状态为
incomingCall:false
。通过道具将状态传递给电话和聊天组件。然后我会将通知分离到它自己的组件中，并将其放在
电话和聊天
组件中，并显示
incomingCall
何时为
真
 我将
套接字
放置在
满
组件中，状态为
incomingCall:false
。通过道具将状态传递给电话和聊天组件。然后我会将通知分离到它自己的组件中，并将其放在
电话和聊天
组件中，并显示
incomingCall
何时为
真
 通知通常是全局的。将套接字订阅者放在某个父级组件中，并发送通常是全局的状态通知。将套接字订户放在某个父级组件中，并发送状态