Memasang komponen React dalam gambar dalam tetingkap gambar-tutorial js-php.cn

Memasang komponen React dalam gambar dalam tetingkap gambar

DDD

Lepaskan： 2024-09-18 22:57:27

asal

382 orang telah melayarinya

Mounting a React component in a picture in picture window

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;

Salin selepas log masuk

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;

Salin selepas log masuk

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

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

Salin selepas log masuk

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);

Salin selepas log masuk

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

Salin selepas log masuk

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;

Salin selepas log masuk

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!