如何實現在react現有項目中嵌入Blazor?

来源:https://www.cnblogs.com/hejiale010426/archive/2023/01/19/17061440.html
-Advertisement-
Play Games

如何實現在react現有項目中嵌入Blazor? 目前官方只提供了angular和react倆種示例所以本教程只將react教程 思路講解: 首先在現有react項目中我們可能某些組件是在Blazor中完成,但是我們沒辦法找到怎麼在react中輕量級使用blazor組件,可能會有人會使用iframe ...


如何實現在react現有項目中嵌入Blazor?

目前官方只提供了angular和react倆種示例所以本教程只將react教程

思路講解:

首先在現有react項目中我們可能某些組件是在Blazor中完成,但是我們沒辦法找到怎麼在react中輕量級使用blazor組件,可能會有人會使用iframe去載入Blazor項目,但是我不太喜歡這種方式,所以今天問了很多大佬,有大佬說可以直接在react使用Blazor組件的方式,並且找到了文檔和示例(其實在Blazor文檔中微軟已經提到了這個但是由於在文檔的在下麵的示例中可能沒什麼人去看 [文檔直通車](ASP.NET Core Razor 組件 | Microsoft Learn))

首先流程

  1. 創建react項目

    npx create-react-app react-debug
    cd react-debug
    yarn or npm i
    

    將以下代碼添加到App.js

import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
    const [nextCounterIndex, setNextCounterIndex] = useState(1);
    const [blazorCounters, setBlazorCounters] = useState([]);
    const addBlazorCounter = () => {
        const index = nextCounterIndex;
        setNextCounterIndex(index + 1);
        setBlazorCounters(blazorCounters.concat([{
            title: `Counter ${index}`,
            incrementAmount: index,
        }]));
    };
    const removeBlazorCounter = () => {
        setBlazorCounters(blazorCounters.slice(0, -1));
    };

    return (
        <div className="App">
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                <p>
                    <button onClick={addBlazorCounter}>Add Blazor counter</button> &nbsp;
                    <button onClick={removeBlazorCounter}>Remove Blazor counter</button>
                </p>
    
                {blazorCounters.map(counter =>
                    <div key={counter.title}>
                        <my-blazor-counter title={counter.title} increment-amount={counter.incrementAmount}></my-blazor-counter> // 這裡將是渲染razor組件的地方 `my-blazor-counter` 是在razor中定義的,會在下麵講到 
                    </div>
                )}
    
            </header>
        </div>
    );
}
export default App;

將以下引用添加到public/index.htmlMicrosoft.AspNetCore.Components.CustomElements/BlazorCustomElements.js是Microsoft.AspNetCore.Components.CustomElements 生成的

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script src="_content/Microsoft.AspNetCore.Components.CustomElements/BlazorCustomElements.js"></script> 
    <script src="_framework/blazor.webassembly.js"></script>
  </body>
</html>

  1. 創建WebAssembly項目
	mkdir webassembly 
	cd webassembly
	dotnet new blazorwasm-empty 

WebAssembly文件夾 並且在文件夾中創建 WebAssembly的空項目
需要確保項目是7.0 因為目前只支持6的預覽和7的正式版
安裝 Microsoft.AspNetCore.Components.CustomElements

	    <PackageReference="Microsoft.AspNetCore.Components.CustomElements" Version="7.0.2" />

Microsoft.AspNetCore.Components.CustomElements 是提供組件化的主要實現

修改Program.cs的代碼

using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
// BlazorApp.Pages.Index可以修改成自己的渲染的razor組件
// my-blazor-counter就是上面提到的razor對應的標記 這樣就可以在react通過my-blazor-counter去渲染BlazorApp.Pages.Index組件的內容了
builder.RootComponents.RegisterCustomElement<webassembly.Pages.Index>("my-blazor-counter");
builder.RootComponents.Add<HeadOutlet>("head::after");

await builder.Build().RunAsync();

webassembly.Pages.Index組件相關代碼

<h1>@Title</h1>

<p role="status">Current count: @currentCount</p>
<p>Increment amount: @IncrementAmount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;
    
    [Parameter] public string Title { get; set; } = "Blazor Counter";
    [Parameter] public int? IncrementAmount { get; set; }

    private void IncrementCount()
    {
        currentCount += IncrementAmount.GetValueOrDefault(1);
    }
}

<style>
    button {
        font-weight: bold;
        background-color: #7b31b8;
        color: white;
        border-radius: 4px;
        padding: 4px 12px;
        border: none;
    }

    button:hover {
        background-color: #9654cc;
        cursor: pointer;
    }

    button:active {
        background-color: #b174e4;
    }

</style>

如何查看運行效果:

如果需要查看運行效果有很多種方式比如通過代碼將Blazor和react的代理到一塊這樣就可以一邊修改一邊預覽,

但是我現在做最簡單的
先將react build生成

yarn build

將build目錄下麵的所有文件拷貝到webassembly\wwwroot下,並且覆蓋index.html

然後執行dotnet程式 在webassembly目錄下執行

dotnet watch

將會打開瀏覽器 ,效果入下圖,我們可以添加 Add Blazor counter

效果將是這樣,可以點擊Click me將會條件 Current count數量 點擊Remove Blazor counter將會刪除razor組件

好了效果差不多是這樣字,

通過這個案例我們可以知道 blazor也可以像react那樣嵌入在任何的現有項目中,並且使用方便,如果是vue的話目前還不知道是否支持 目前官方只提供了angular和react倆種實現,並且支持webassembly和server,當前教程是WebAssembly的實踐,Server會有所差異,

結尾

項目地址:239573049/Use-blazor-in-react (github.com)
官方示例: github地址
技術交流群:737776595

來著token的分享;


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 2023-01-19 一、SpringMVC簡介 1、SpringMVC是Spring子框架 2、SpringMVC是Spring為“控制層”提供的基於MVC設計理念的優秀的Web框架,是目前最主流的MVC框架。 3、SpringMVC是非侵入式:可以使用註解讓普通java對象,作為請求處理器(Co ...
  • 安裝Go及開發工具介紹 安裝Go 安裝過程非常簡單,下載自己系統對應的安裝包後直接安裝即可。安裝路徑中包含空格不會對Go環境有影響,在windows系統中,安裝到預設Program Files或Program Files (x86)即可,也可以根據自己需要改變安裝目錄。 安裝完成後,開啟一個新的cm ...
  • 淘汰策略概述 redis作為緩存使用時,在添加新數據的同時自動清理舊的數據。這種行為在開發者社區眾所周知,也是流行的memcached系統的預設行為。 redis中使用的LRU淘汰演算法是一種近似LRU的演算法。 淘汰策略 針對淘汰策略,redis有一下幾種配置方案: 1、noeviction:當觸發內 ...
  • 眾所周知,PDF文檔除了具有較強穩定性和相容性外, 還具有較強的安全性,在工作中可以有效避免別人無意中對文檔內容進行修改。但與此同時,也妨礙了對文檔的正常的修改。這時我們可以將PDF轉為Word文檔進行修改或再編輯。使用軟體將 PDF 文檔轉換為 Word 文檔十分簡單,然而要在轉換時保持佈局甚至字 ...
  • Loj鏈接:接竹竿 $ {\scr \color {SkyBlue}{\text{Solution}}} $ 題目大意: 給定一個數組,每次加入一種顏色的數,可以取走與它顏色相同的兩個數之間的所有數,問最後取走的所有數中最大和是多少 分析: 第一眼看到的是二分答案,但不知道二分的check()函數怎 ...
  • 2023-01-19 Spring聲明式事務管理屬性 一、隔離級別 1、概念:一個事務與其他事務之間的隔離等級(1,2,4,8)。 2、隔離級別: (1)讀未提交(1):READ UNCOMMTTED 存在問題:臟讀(讀取到了未提交數據) (2)讀已提交(2):READ COMMTTED 存在問題: ...
  • 概述 web管理系統中可以對業務數據執行新增和刪除,現在需要當業務數據發生新增或刪除操作後,儘可能實時的反應到WPF客戶端上面。 web管理系統用VUE編寫,後端服務為SpringBoot,WPF客戶端基於.Netframework4.8編寫。 整體架構 sequenceDiagram title: ...
  • 在工作中,為了防止文件被隨意複製和傳播,通常我們會選擇在文檔中添加水印來對文件進行有效保護。文字水印是比較常見的一種保護手段,它可以有效防止文件被任意複製和隨意列印傳播。不過,Excel預設並沒有水印功能。此時,我們可以把插入的藝術字作為水印,將水印和工作表融合在一起,以防止文檔被覆制傳播。那麼如何 ...
一周排行
    -Advertisement-
    Play Games
  • 通過WPF的按鈕、文本輸入框實現了一個簡單的SpinBox數字輸入用戶組件並可以通過數據綁定數值和步長。本文中介紹了通過Xaml代碼實現自定義組件的佈局,依賴屬性的定義和使用等知識點。 ...
  • 以前,我看到一個朋友在對一個系統做初始化的時候,通過一組魔幻般的按鍵,調出來一個隱藏的系統設置界面,這個界面在常規的菜單或者工具欄是看不到的,因為它是一個後臺設置的關鍵界面,不公開,同時避免常規用戶的誤操作,它是作為一個超級管理員的入口功能,這個是很不錯的思路。其實Winform做這樣的處理也是很容... ...
  • 一:背景 1. 講故事 前些天有位朋友找到我,說他的程式每次關閉時就會自動崩潰,一直找不到原因讓我幫忙看一下怎麼回事,這位朋友應該是第二次找我了,分析了下 dump 還是挺經典的,拿出來給大家分享一下吧。 二:WinDbg 分析 1. 為什麼會崩潰 找崩潰原因比較簡單,用 !analyze -v 命 ...
  • 在一些報表模塊中,需要我們根據用戶操作的名稱,來動態根據人員姓名,更新報表的簽名圖片,也就是電子手寫簽名效果,本篇隨筆介紹一下使用FastReport報表動態更新人員簽名圖片。 ...
  • 最新內容優先發佈於個人博客:小虎技術分享站,隨後逐步搬運到博客園。 創作不易,如果覺得有用請在Github上為博主點亮一顆小星星吧! 博主開始學習編程於11年前,年少時還只會使用cin 和cout ,給單片機點點燈。那時候,類似async/await 和future/promise 模型的認知還不是 ...
  • 之前在阿裡雲ECS 99元/年的活動實例上搭建了一個測試用的MINIO服務,以前都是直接當基礎設施來使用的,這次準備自己學一下S3相容API相關的對象存儲開發,因此有了這個小工具。目前僅包含上傳功能,後續計劃開發一個類似圖床的對象存儲應用。 ...
  • 目錄簡介快速入門安裝 NuGet 包實體類User資料庫類DbFactory增刪改查InsertSelectUpdateDelete總結 簡介 NPoco 是 PetaPoco 的一個分支,具有一些額外的功能,截至現在 github 星數 839。NPoco 中文資料沒多少,我是被博客園群友推薦的, ...
  • 前言 前面使用 Admin.Core 的代碼生成器生成了通用代碼生成器的基礎模塊 分組,模板,項目,項目模型,項目欄位的基礎功能,本篇繼續完善,實現最核心的模板生成功能,並提供生成預覽及代碼文件壓縮下載 準備 首先清楚幾個模塊的關係,如何使用,簡單畫一個流程圖 前面完成了基礎的模板組,模板管理,項目 ...
  • 假設需要實現一個圖標和文本結合的按鈕 ,普通做法是 直接重寫該按鈕的模板; 如果想作為通用的呢? 兩種做法: 附加屬性 自定義控制項 推薦使用附加屬性的形式 第一種:附加屬性 創建Button的附加屬性 ButtonExtensions 1 public static class ButtonExte ...
  • 在C#中,委托是一種引用類型的數據類型,允許我們封裝方法的引用。通過使用委托,我們可以將方法作為參數傳遞給其他方法,或者將多個方法組合在一起,從而實現更靈活的編程模式。委托類似於函數指針,但提供了類型安全和垃圾回收等現代語言特性。 基本概念 定義委托 定義委托需要指定它所代表的方法的原型,包括返回類 ...