google 在 chrome 116 中引入了 documentpictureinpicture api。
在本文中,我们将探讨如何在画中画窗口中安装一个简单的 react 组件,而无需先将其安装在我们的主应用程序上。
第 1 步 - 设置组件结构
我们制造两个组件。 maincomponent.js 和 counter.js。在 maincomponent.js 中,我们设置了一个简单的按钮,它将在 pip 窗口中打开 counter.js 组件。
maincomponent.js
import react from "react";
const maincomponent = () => {
async function openpictureinpicture() {
//
}
return (
<div>
<div onclick="{openpictureinpicture}">open counter</div>
</div>
);
};
export default maincomponent;
counter.js
import react, { usestate, useeffect } from "react";
const counter = () => {
const [count, setcount] = usestate(0);
useeffect(() => {
setcount(1);
}, []);
const addnumber = () => {
setcount((prevcount) => prevcount + 1);
};
const subtractnumber = () => {
setcount((prevcount) => prevcount - 1);
};
try {
return (
<div>
<div onclick="{subtractnumber}">-</div>
<button>{count}</button>
<div onclick="{addnumber}">+</div>
</div>
);
} catch (error) {
console.error("error_code: _rendern", error);
return >;
}
};
export default counter;
第 2 步 — 添加画中画功能
在 openpictureinpicture() 函数中,我们请求图片窗口中的图片。
const pipwindow = await window.documentpictureinpicture.requestwindow();
我们在 pip 窗口的主体中创建一个 div 元素。在此 div 上,我们将安装 counter.js
const pipdiv = pipwindow.document.createelement("div");
pipdiv.setattribute("id", "pip-root");
pipwindow.document.body.append(pipdiv);
现在我们将 counter.js 组件挂载到 id 为“pip-root”的 div 上。
const pip_root = reactdom.createroot(
pipwindow.document.getelementbyid("pip-root")
);
pip_root.render(<counter></counter>);
第 3 步 — 组合所有
最终的 maincomponent.js 代码应该如下所示。
import React from "react";
import Counter from "./Counter";
import ReactDOM from "react-dom/client";
const MainComponent = () => {
async function openPictureInPicture() {
const pipWindow = await window.documentPictureInPicture.requestWindow();
const pipDiv = pipWindow.document.createElement("div");
pipDiv.setAttribute("id", "pip-root");
pipWindow.document.body.append(pipDiv);
const PIP_ROOT = ReactDOM.createRoot(pipWindow.document.getElementById("pip-root"));
PIP_ROOT.render(<counter></counter>);
}
return (
<div>
<div onclick="{openPictureInPicture}">Open counter</div>
</div>
);
};
export default MainComponent;
现在我们有自己的 react 组件安装在图片窗口的图片上!