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

我的React应用程序包含视频聊天功能（通过Twilio）。用户转到仪表板，然后单击按钮开始通话。这将提示实例化并显示

VideoCall

组件。在实例化时，它连接到后端Twilio服务以获取访问令牌，然后连接到Twilio以创建调用、设置事件处理程序等

目前，我在仪表板中的div中显示视频窗口，但我希望它们显示在弹出窗口中。我尝试过使用react新窗口和react门户，但我对如何使其正常工作了解不够

目前我有以下

仪表板
组件：

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

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

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

到目前为止，这是可行的。用户单击按钮，视频窗口将显示在dashbaord的顶部，如预期的那样

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

我尝试了package react new window，它只涉及将
VideoCall
包装在
NewWindow
中。我尝试将其包装在
仪表板
组件中：

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

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

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

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

然后我尝试分解新窗口代码并创建自己的定制版本，但我对它的工作原理了解不够，无法满足我的需要

那么，有没有一种方法可以从新窗口中的组件访问该窗口的DOM？或者我应该采取另一种方法？
这里是Twilio developer evangelist

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

我写了一篇关于如何在不直接访问DOM的情况下将参与者添加到页面的文章

我建议您仔细查看一下，也许还可以更新您的应用程序，这样您就不必使用
document.getElementById
，然后希望
组件可以像广告中那样工作。
谢谢；我明天会试试！让我知道它是如何运行的！我最后改变了它的工作方式，这样视频就可以与广告中的一样在同一个窗口中其余的。