在畫中畫視窗中安裝 React 元件
google 在 chrome 116 中引入了 documentpictureinpicture api。在本文中,我們將探討如何在畫中畫視窗中安裝一個簡單的 react 元件,而無需先將其安裝在我們的主應用程式上。第 1 步 - 設定元件結構我們製造兩個元件。 maincomponent.js 和 counter.js。在 maincomponent.js 中,我們設定了一個簡單的按鈕,它將在 pip 視窗中開啟 counter.js 元件。maincomponent.jsimport react from "react";const maincomponent = () => { async function openpictureinpicture() { // } return ( <div> <div onclick="{openpictureinpicture}">open counter</div> </div> );};export default maincomponent;登入後複製counter.jsimport 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
", error); return >; }};export default counter;登入後複製第 2 步 — 新增畫中畫功能在 openpictureinpicture() 函式中,我們請求圖片視窗中的圖片。const pipwindow = await window.documentpictureinpicture.requestwindow();登入後複製我們在 pip 視窗的主體中建立一個 div 元素。在此 div 上,我們將安裝 counter.jsconst 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></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></counter>); } return ( <div> <div onclick="{openPictureInPicture}">Open counter</div> </div> );};export default MainComponent;登入後複製現在我們有自己的 react 元件安裝在圖片視窗的圖片上! 以上就是在畫中畫視窗中安裝 React 元件的詳細內容,更多請關注我的其它相關文章!
相關文章
- 「Premiere中文新手教程」視訊畫中畫小技巧REM
- Android 8.0 中如何實現視訊通話的畫中畫模式Android模式
- 如何用視訊剪輯軟體製作畫中畫
- Android 8.0 Oreo 畫中畫模式Android模式
- 在Mac上觀看畫中畫影片,讓你的使用更方便Mac
- [譯] 挑戰 Flutter 之 YouTube(畫中畫)Flutter
- Flutter PIP(畫中畫)效果的實現Flutter
- 如何在Mac上的Safari中觀看YouTube畫中畫?Mac
- JavaCV 視訊濾鏡(LOGO、滾動字幕、畫中畫、NxN宮格)JavaGo
- PS小白教程:如何在Photoshop中製作畫中畫的效果?
- 用MovieMator Video Editor Pro建立畫中畫影片IDE
- 使用Python在Excel畫畫PythonExcel
- OpenGL中的畫素操作
- 創造 “魔術時刻” —— Android 8.0 畫中畫Android
- js實現在彈出視窗中重新整理主視窗JS
- 在終端畫畫、炒股、玩遊戲遊戲
- 如何安裝透明視窗主題Emerald在Ubuntu 13.04/12.10/12.04中-PPAUbuntu
- 在React專案中安裝並使用Less(用法總結)React
- 裝置畫素、獨立畫素和css畫素CSS
- 在Mac中如何用⌘鍵拖拽非使用中的視窗?Mac
- 在CAD夢想畫圖中如何使用PLAN命令
- iOS 9 分屏多工(3):畫中畫(PiP)快速入門iOS
- [譯] 在資料視覺化中,我們曾經“畫”下的那些敗筆視覺化
- PyQt5程式設計(23):在視窗中佈局元件—絕對定位QT程式設計元件
- 在非主執行緒中建立視窗執行緒
- 「ReStory」在 Markdown 中自由書寫 React 元件 (Beta)RESTReact元件
- 優雅的在React元件中註冊事件React元件事件
- TypeScript在React高階元件中的使用技巧TypeScriptReact元件
- python中turtle如何畫太陽花?Python
- 影象中的畫素處理
- 封裝React AntD的dialog彈窗元件封裝React元件
- 2023 年了,React Native 中怎麼畫圖表?React Native
- React周檢視元件封裝React元件封裝
- 在 CTreeCtrl 中列舉系統中的所有視窗!(I) (轉)
- 在 CTreeCtrl 中列舉系統中的所有視窗!(II) (轉)
- 雙緩衝在畫板程式中的應用(二) (轉)
- 雙緩衝在畫板程式中的應用(一) (轉)
- 漫畫:多執行緒經典例子之一視窗售票執行緒