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

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《在画中画窗口中安装 React 组件》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

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: _render\n", 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 />);

第 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 />);
 }

 return (
  <div>
   <div onClick={openPictureInPicture}>Open counter</div>
  </div>
 );
};

export default MainComponent;

现在我们有自己的 react 组件安装在图片窗口的图片上！

本篇关于《在画中画窗口中安装 React 组件》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！