在画中画窗口中挂载React组件
原文英文，约400词，阅读约需2分钟。
📝
内容提要
谷歌在Chrome 116中引入了documentPictureInPicture API。本文介绍了如何在图片中打开一个简单的React组件，而无需先在主应用程序中挂载它。首先设置组件结构，然后添加图片中的图片功能，最后将所有内容组合在一起。现在我们可以在图片中打开自己的React组件了！
❓
Q&A
documentPictureInPicture API的主要功能是什么？
documentPictureInPicture API允许在画中画窗口中显示内容，支持挂载React组件。
如何在画中画窗口中挂载React组件？
首先设置组件结构，然后在openPictureInPicture()函数中请求画中画窗口，最后将组件挂载到窗口中。
MainComponent.js和Counter.js的作用是什么？
MainComponent.js用于创建按钮以打开Counter.js组件，Counter.js则管理计数器的状态。
如何请求画中画窗口？
在openPictureInPicture()函数中使用await window.documentPictureInPicture.requestWindow()来请求画中画窗口。
在Counter.js中如何管理计数器状态？
使用useState和useEffect钩子来管理计数器的状态，初始值为0。
最终的MainComponent.js代码结构是什么样的？
最终代码包括导入React和Counter组件，定义openPictureInPicture函数，并在按钮点击时打开画中画窗口。
🏷️
