DEV Community
·
在画中画窗口中挂载React组件
💡
原文英文，约400词，阅读约需2分钟。
📝
内容提要
谷歌在Chrome 116中引入了documentPictureInPicture API。本文介绍了如何在图片中打开一个简单的React组件，而无需先在主应用程序中挂载它。首先设置组件结构，然后添加图片中的图片功能，最后将所有内容组合在一起。现在我们可以在图片中打开自己的React组件了！
🎯
关键要点
- 谷歌在Chrome 116中引入了documentPictureInPicture API。
- 本文介绍如何在画中画窗口中挂载简单的React组件。
- 第一步：设置组件结构，创建MainComponent.js和Counter.js。
- MainComponent.js中包含一个按钮，用于打开Counter.js组件。
- Counter.js组件使用useState和useEffect管理计数器状态。
- 第二步：在openPictureInPicture()函数中请求画中画窗口。
- 创建一个div元素并将其添加到画中画窗口的body中。
- 在id为'pip-root'的div上挂载Counter.js组件。
- 第三步：将所有代码组合在一起，完成MainComponent.js的最终代码。
- 现在可以在画中画窗口中挂载自己的React组件。
➡️
