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

Question

我的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似乎是来自仪表板窗口的DOM，而不是新窗口中的DOM(而且，任何console.log命令都会记录到原始窗口的控制台，而不是新窗口)。

然后我试着分解NewWindow代码并创建自己的定制版本，但我不太了解它是如何工作的，无法让它做我需要的事情。

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

Answer 1

Twilio开发者的布道者在这里。

在React中，直接使用原生DOM方法(如document.getElementById )访问DOM是不可取的。React本身应该负责在DOM中添加和删除内容。

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

我建议您仔细查看一下，也许还可以更新您的应用程序，这样您就不必使用document.getElementById，然后希望<NewWindow>组件能够像广告中所说的那样工作。