如何在我的 React 应用程序中创建一个单独的动态窗口？

问题描述

我的 React 应用程序包含视频聊天功能（通过 Twilio）。用户转到仪表板，然后单击按钮开始呼叫。这会提示 VideoCall 组件被实例化并显示。在实例化时，它连接到后端 Twilio 服务以获取访问令牌，然后连接到 Twilio 以创建调用、设置事件处理程序等。

目前我在仪表板的 div 中显示视频窗口，但我希望它们显示在弹出窗口中。我尝试过使用 react-new-window 并尝试过 React Portals，但我对我所做的工作不够了解。

目前我有以下 Dashboard 组件：

function Dashboard(props) {

  const { displayInfo} = props
  const [ callInitiated,setCallInitiated ] = useState(false)

  const initCall = () => {
    setCallInitiated(true)
  }

  return (
    <div id="dashboard">
      {callInitiated ? <VideoCall displayInfo={displayInfo} /> : null }
      <div> ...rest of dashboard,including button which calls 'initCall' on being clicked... </div>
    </div>
  )

}

export default Dashboard

我的 VideoCall 组件是：

const Video = require('twilio-video');

// Get access token from backend service
async function getAccesstoken(identity) {

    const url = `${process.env.REACT_APP_TWILIO_TOKEN_SERVICE}?identity=${identity}`;
    try {
        const response = await axios.get(`${url}`,AXIOS_HEADERS);
        return response.data.accesstoken;
    } catch {
        return null;
    }

}

// VideoCall component
function VideoCall(props) {

    const { displayInfo} = props

    // Connect to Twilio server function to get access token
    getAccesstoken('Tester')
    .then((token) => {
      Video.connect(token,{
        name: 'Test room'
      })
      .then(room => {
        participantConnected(room.localParticipant);
        room.participants.forEach(participantConnected);
        room.on('participantConnected',participantConnected);
        room.on('participantdisconnected',participantdisconnected);
        room.once('disconnected',error => room.participants.forEach(participantdisconnected))
      })
    });

    function participantConnected(participant) {
    
      const div = document.createElement('div');
      div.id = participant.sid;
    
      participant.on('trackSubscribed',track => trackSubscribed(div,track));
      participant.on('trackUnsubscribed',trackUnsubscribed);
    
      participant.tracks.forEach(publication => {
          trackSubscribed(div,publication.track);
      });

      if(participant.identity === 'Tester') {
        document.getElementById('myVideoWindow').appendChild(div)
      }
      
    }
    
    function participantdisconnected(participant) {
      document.getElementById(participant.sid).remove();
    }
    
    function trackSubscribed(div,track) {
      div.appendChild(track.attach());
    }
    
    function trackUnsubscribed(track) {
      track.detach().forEach(element => element.remove());
    }

    return (
          <div id="callWrapper" className="callOuterWrapper">
              <div className="titleBar">
                  <h1 className="pageHeader">Calling {displayInfo.receiverName}</h1>
              </div>
              <div className="videoRoom">
                    <div id="myVideoWindow" className="callWindow"></div>
                    <div className="callInfo"> ...this will contain info on call status... </div>
                    <div id="receiverWindow" className="callWindow"></div>
              </div>
          </div>
    )
}

export default VideoCall

到目前为止，这是有效的。用户点击按钮，视频窗口就会出现在仪表板的顶部，正如预期的那样。

现在我想将 VideoCall 组件拉出到一个单独的窗口中（以便用户在通话时仍然可以看到仪表板。

我尝试了 react-new-window 包，它只是将 VideoCall 包装在 NewWindow 中。我尝试将它包装在 Dashboard 组件中：

<div id="dashboard">
  {callInitiated ? <NewWindow><VideoCall displayInfo={displayInfo} /></NewWindow> : null }
  <div> ...rest of dashboard,including button which calls 'initCall' on being clicked... </div>
</div>

当这不起作用时，我尝试将其包裹在 VideoCall 组件中：

<NewWindow>
   <div id="callWrapper" className="callOuterWrapper">...</div>
</NewWindow>

在这两种情况下，这都显示了带有空 callWrapper div 的新窗口；但是，一旦到达 document.getElementById('myVideoWindow').appendChild(div)，它就无法找到 div。被引用的 DOM 似乎来自仪表板窗口而不是新窗口（而且，任何 console.log 命令都会记录到原始窗口的控制台，而不是新窗口）。

然后我尝试拆分 NewWindow 代码并创建我自己的定制版本，但我对它的工作原理知之甚少，无法满足我的需求。

那么，有没有办法从里面的组件访问新窗口的DOM呢？或者我应该采取什么不同的方法？

解决方法

这里是 Twilio 开发者布道者。

使用原生 DOM 方法（如 document.getElementById）直接访问 DOM，在 React 中有点不受欢迎。 React 本身应该负责在 DOM 中添加和删除内容。

我在 how to build a video chat with React 上写了一篇博文，介绍了如何在不直接访问 DOM 的情况下将参与者添加到页面。

我建议您仔细检查一下，也许可以更新您的应用，这样您就不必使用 document.getElementById，然后希望 <NewWindow> 组件应该像宣传的那样工作。