在畫中畫視窗中安裝 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 元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！