Mounten einer React-Komponente in einem Bild-in-Bild-Fenster

Google hat die documentPictureInPicture API in Chrome 116 eingeführt.

In diesem Artikel untersuchen wir, wie man eine einfache Reaktionskomponente im Bild-in-Bild-Fenster einbindet, ohne sie zuerst in unserer Hauptanwendung einbinden zu müssen.

Schritt 1 – Komponentenstruktur einrichten
Wir stellen zwei Komponenten her. MainComponent.js und Counter.js. In MainComponent.js richten wir eine einfache Schaltfläche ein, die die Counter.js-Komponente im PIP-Fenster öffnet.

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;

Schritt 2 – Bild-in-Bild-Funktion hinzufügen
In der Funktion openPictureInPicture() fordern wir ein Bild im Bildfenster an.

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

Wir erstellen ein div-Element im Hauptteil des Pip-Fensters. Auf diesem Div werden wir unsere Counter.js
mounten

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

Jetzt mounten wir unsere Counter.js-Komponente auf dem Div mit der ID „pip-root“.

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

Schritt 3 – Alles kombinieren
Der endgültige MainComponent.js-Code sollte etwa so aussehen.

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;

Jetzt haben wir unsere eigene Reaktionskomponentenmontage in einem Bild-in-Bild-Fenster!

Das obige ist der detaillierte Inhalt vonMounten einer React-Komponente in einem Bild-in-Bild-Fenster. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!