如何解决如何在我的 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>
组件应该像宣传的那样工作。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。