javascript - 如何在react js中尚未安装的组件中显示通知

Question

我有两个组件(Chat.js Phone.js)和一个容器(Full.js)我正在使用以下版本:react 16.1.1，react-router-dom:4.2.2。以下是我的文件:

完整.js

 class Full extends React.Component {
   render () {
   return(<Switch>
     <Route path="/phone" name="Phone" component={Phone} />
     <Route path="/chat" name="Chat" component={Chat} />
     </Switch>)
   }
 }

聊天.js

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

电话.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 (容器)上，它显示通知，但是当我转到电话页面时，电话组件(也有来电套接字 io 代码)没有显示来电调用通知，因为组件已安装并且所有状态都有初始值(incomingCall 最初将为 false)。

有什么办法可以实现这一点吗？谢谢。

Answer 1

这个问题有很多解决方案。这是一个建议将套接字的读取与两个组件(电话、聊天)解耦。创建一个类，负责读取套接字数据并将数据存储在数组。Chat 和phone 类都将从socketReader 类中读取。我将使socket reader 类成为单例。