在画中画窗口中安装 React 组件

百变鹏仔 2个月前 (10-14) #JavaScript

文章标签画中画

google 在 chrome 116 中引入了 documentpictureinpicture api。

在本文中，我们将探讨如何在画中画窗口中安装一个简单的 react 组件，而无需先将其安装在我们的主应用程序上。

第 1 步 - 设置组件结构
我们制造两个组件。 maincomponent.js 和 counter.js。在 maincomponent.js 中，我们设置了一个简单的按钮，它将在 pip 窗口中打开 counter.js 组件。

maincomponent.js

import react from "react";const maincomponent = () =&gt; { 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 = () =&gt; { const [count, setcount] = usestate(0); useeffect(() =&gt; {  setcount(1); }, []); const addnumber = () =&gt; {  setcount((prevcount) =&gt; prevcount + 1); }; const subtractnumber = () =&gt; {  setcount((prevcount) =&gt; prevcount - 1); }; try {  return (   <div>    <div onclick="{subtractnumber}">-</div>    <button>{count}</button>    <div onclick="{addnumber}">+</div>   </div>  ); } catch (error) {  console.error("error_code: _render\n", error);  return &gt;; }};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 = () =&gt; { 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 组件安装在图片窗口的图片上！

文章推荐

在画中画窗口中安装 React 组件

JavaScript如何获取宏控件数据？

JavaScript怎样读取宏控件数据？

JavaScript获取宏控件数据的技巧

探究JavaScript与Java的联系和区别

javascript:void(o)如何解决？