@r2wc - WebComponnet 實作紀錄
使用 @r2wc 把 React 元件包裝成 Web Components。
引言
關建原碼紀錄
Last updated
使用 @r2wc 把 React 元件包裝成 Web Components。
Last updated
<html>
[...略...]
<body>
<h1>WebForm Page</h1>
<asp:TextBox ID="TextBox1" runat="server">https://www.google.com/</asp:TextBox>
<%-- ※Web Componnet 的命名方式為短橫線命名法 --%>
<%-- 利用 React 元件繪製 QR code。單向 props down --%>
<web-qrcode code="<%= TextBox1.Text %>" />
</body>
</html> <html>
[...略...]
<script>
<%-- init --%>
function handleCounter(newCount) {
console.log('handleCounter', newCount);
<%-- To response event --%>
const myEventList = document.getElementById('myEventList');
const item = document.createElement('li');
item.innerText = `handleCounter → ${newCount}`;
myEventList.appendChild(item);
}
</script>
</head>
<body>
<h1>WebForm Page</h1>
<%-- ※Web Componnet 的命名方式為短橫線命名法 --%>
<%-- props down/events up -->
<%-- 且所有資源必需事先定義好。 --%>
<web-counter init-count="31" on-change="handleCounter"></web-counter>
<h6>Event List</h6>
<ul id="myEventList">
</ul>
</body>
</html>
"use strict";
import React from 'react'
import ReactDOM from 'react-dom/client'
import r2wc from "@r2wc/react-to-web-component"
import MyQRCode from './MyQRCode'
import MyCounter from './MyCounter'
/* 把 React 元件重新定義成 Web Component - props down */
customElements.define("web-qrcode", r2wc(MyQRCode, {
props: {
code: "string",
},
}));
/* 把 React 元件重新定義成 Web Component - props down/events up */
customElements.define("web-counter", r2wc(MyCounter, {
props: {
initCount: "number",
onChange: "function",
},
}));