Memasang komponen React dalam gambar dalam tetingkap gambar

Google telah memperkenalkan documentPictureInPicture API dalam chrome 116.

Dalam artikel ini kami meneroka cara melekapkan komponen tindak balas mudah dalam gambar dalam tetingkap gambar tanpa perlu melekapkannya pada aplikasi utama kami terlebih dahulu.

Langkah 1 — Sediakan struktur komponen
Kami membuat dua komponen. MainComponent.js dan Counter.js. Dalam MainComponent.js kami menyediakan butang mudah yang akan membuka komponen Counter.js dalam tetingkap PIP.

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;

Langkah 2 — Tambahkan gambar dalam fungsi gambar
Dalam fungsi openPictureInPicture() kami meminta gambar dalam tetingkap gambar.

const pipWindow = await window.documentPictureInPicture.requestWindow();

Kami mencipta elemen div dalam badan tetingkap pip. Pada div ini kami akan memasang Counter.js
kami

const pipDiv = pipWindow.document.createElement("div");
pipDiv.setAttribute("id", "pip-root");
pipWindow.document.body.append(pipDiv);

Kini kami memasang komponen Counter.js kami pada div dengan id "pip-root".

const PIP_ROOT = ReactDOM.createRoot(
        pipWindow.document.getElementById("pip-root")
);
PIP_ROOT.render(<Counter />);

Langkah 3 — Menggabungkan semuanya
Kod MainComponent.js akhir sepatutnya kelihatan seperti ini.

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;

Kini kami mempunyai komponen tindak balas kami sendiri yang dipasang pada gambar dalam tetingkap gambar!

Atas ialah kandungan terperinci Memasang komponen React dalam gambar dalam tetingkap gambar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!