如何實現在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
  • 一:背景 1. 講故事 年前遇到了好幾例托管堆被損壞的案例,有些運氣好一些,從被破壞的托管堆記憶體現場能觀測出大概是什麼問題,但更多的情況下是無法做出準確判斷的,原因就在於生成的dump是第二現場,借用之前文章的一張圖,大家可以理解一下。 為了幫助更多受此問題困擾的朋友,這篇來整理一下如何 快狠準 的 ...
  • 前言 .NET6 開始,.NET Croe API 項目取消了 Startup.cs 文件,在 Program.cs 文件的 Main 函數中完成服務的註冊和中間件管道的管理。但當我們項目引入更多包的時候,Program.cs 文件也會看起來很臃腫。 而且,我們不只會有一個後端項目,為了方便快速創建 ...
  • 目錄 背景 get 與 post 的區別 所有介面都用 post 請求? 背景 最近在逛知乎的時候發現一個有趣的問題:公司規定所有介面都用 post 請求,這是為什麼? 看到這個問題的時候其實我也挺有感觸的,因為我也曾經這樣問過我自己。在上上一家公司的時候接到一個項目是從零開始搭建一個微服務,當時就 ...
  • *以下內容為本人的學習筆記,如需要轉載,請聲明原文鏈接 微信公眾號「englyf」https://mp.weixin.qq.com/s/2GFLTstDC7w6u3fTJxflNA 本文大概 1685 個字,閱讀需花 6 分鐘內容不多, 但也花了一些精力如要交流, 歡迎關註我然後評論區留言 謝謝你的 ...
  • 在新版本的pandas中,上述代碼會引起警告,建議改成SQLAlchemy connectable(engine/connection),後續代碼將引入這種升級的連接方式。 ...
  • 幾乎所有的高級編程語言都有自己的垃圾回收機制,開發者不需要關註記憶體的申請與釋放,Python 也不例外。Python 官方團隊的文章 https://devguide.python.org/internals/garbage-collector 詳細介紹了 Python 中的垃圾回收演算法,本文是這篇 ...
  • 如果您想查找高於或低於平均值的數字,可以不必計算該平均值,就能查看更高或更低的值。通過Java應用程式,可以自動突出顯示這些數字。除了快速突出顯示高於或低於平均值的值外,您還可以查看高於或低於的值的個數。現在讓我們看看如何在 Java應用程式中實現此操作。 引入jar包 導入方法1: 手動引入。將  ...
  • 第一種方式:使用{} firstDict = {"name": "wang yuan wai ", "age" : 25} 說明:{}為創建一個空的字典對象 第二種方式:使用fromkeys()方法 second_dict = dict.fromkeys(("name", "age")) #valu ...
  • 在golang中可以使用a := b這種方式將b賦值給a,只有當b能進行深拷貝時a與b才不會互相影響,否則就需要進行更為複雜的深拷貝。 下麵就是Go賦值操作的一個說明: Go語言中所有賦值操作都是值傳遞,如果結構中不含指針,則直接賦值就是深度拷貝;如果結構中含有指針(包括自定義指針,以及切片,map ...
  • 本文結合京東監控埋點場景,對解決樣板代碼的技術選型方案進行分析,給出最終解決方案後,結合理論和實踐進一步展開。通過關註文中的技術分析過程和技術場景,讀者可收穫一種樣板代碼思想過程和解決思路,並對Java編譯器底層有初步瞭解。 ...