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

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

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

有什么办法可以做到这一点？谢谢。

Answer 1

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

Answer 2

我会将socket放在状态为Full的{{1}}组件中。通过道具将状态传递到incomingCall: false组件。然后，我将Notification分成其自己的组件，并将其放在Phone and Chat组件内，并显示Phone and Chat是incomingCall的时间。

如何在React JS中尚未安装的组件中显示通知

2 个答案: