Montage d'un composant React dans une image dans une fenêtre d'image-js tutoriel-php.cn

Montage d'un composant React dans une image dans une fenêtre d'image

DDD

Libérer： 2024-09-18 22:57:27

original

380 Les gens l'ont consulté

Mounting a React component in a picture in picture window

Google a introduit l'API documentPictureInPicture dans Chrome 116.

Dans cet article, nous explorons comment monter un composant de réaction simple dans l'image dans la fenêtre d'image sans avoir besoin de le monter au préalable sur notre application principale.

Étape 1 — Configurer la structure des composants
Nous fabriquons deux composants. MainComponent.js et Counter.js. Dans MainComponent.js, nous avons configuré un simple bouton qui ouvrira le composant Counter.js dans la fenêtre PIP.

MainComponent.js

import React from "react";

const MainComponent = () => {
 async function openPictureInPicture() {
  // 
 }

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

export default MainComponent;

Copier après la connexion

Compteur.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;

Copier après la connexion

Étape 2 — Ajouter la fonctionnalité image dans l'image
Dans la fonction openPictureInPicture(), nous demandons une image dans la fenêtre d'image.

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

Copier après la connexion

Nous créons un élément div dans le corps de la fenêtre pip. Sur cette div nous monterons notre Counter.js

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

Copier après la connexion

Maintenant, nous montons notre composant Counter.js sur le div avec l'identifiant « pip-root ».

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

Copier après la connexion

Étape 3 — Combiner tout
Le code final de MainComponent.js devrait ressembler à ceci.

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;

Copier après la connexion

Nous avons maintenant notre propre composant React monté sur une image dans une fenêtre panoramique !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!