如何在反应js中显示尚未安装的组件中的通知

Question

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

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。我的问题是，当我在聊天页面，然后我无法知道传入的新呼叫，因为我不在电话页面。

我尝试在Full.js（容器）上放置套接字io代码（来电代码），它显示通知但是当我转到电话页面时，电话组件（也有来电呼叫套接字代码）没有显示来电通知，因为组件已挂载且所有状态都具有初始值（incomingCall最初将为false）。

有没有办法实现这个目标？谢谢。

Answer 1

这个问题有很多解决方案。这里有一个建议从两个组件（电话，聊天）中解除套接字的读取。创建一个负责读取套接字数据并将数据存储在数组中的类。聊天和手机将从socketReader类读取。我将使套接字读取器类成为单例。

Answer 2

我会把socket放在Full组件中，状态为incomingCall: false。通过道具将状态传递给Phone and Chat组件。然后我会将Notification分成它自己的组件并将它放在Phone and Chat组件中并显示当incomingCall是true时。