網站首頁 編程語言 正文
如何實現在react現有項目中嵌入Blazor?
目前官方只提供了angular和react倆種示例所以本教程只講react教程
思路講解:
首先在現有react項目中我們可能某些組件是在Blazor中完成,但是我們沒辦法找到怎么在react中輕量級使用blazor組件,可能會有人會使用iframe
去加載Blazor項目,但是我不太喜歡這種方式,所以今天問了很多大佬,有大佬說可以直接在react使用Blazor組件的方式,并且找到了文檔和示例(其實在Blazor文檔中微軟已經提到了這個但是由于在文檔的在下面的示例中可能沒什么人去看 [文檔直通車](ASP.NET Core Razor 組件 | Microsoft Learn))
首先流程
創建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> <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.html
中 Microsoft.AspNetCore.Components.CustomElements/BlazorCustomElements.js
是Microsoft.AspNetCore.Components.CustomElements 生成的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link 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 href="%PUBLIC_URL%/logo192.png" /> <link 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>
創建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會有所差異,
原文鏈接:https://www.cnblogs.com/hejiale010426/p/17061440.html
相關推薦
- 2022-04-25 ASP.NET?Core?MVC中Tag?Helpers用法介紹_實用技巧
- 2023-01-07 Android?RecyclerLineChart實現圖表繪制教程_Android
- 2023-03-20 C#實現拷貝文件到另一個文件夾下_C#教程
- 2022-09-02 C++中protobuf?的交叉編譯使用詳解_C 語言
- 2022-11-26 C#?WinForm實現自動更新程序的方法詳解_C#教程
- 2022-05-17 qt 解決Error while building/deploying project Hmi (k
- 2022-07-22 定時任務和延時任務詳解
- 2022-03-07 C語言中的rand()和rand_r()詳解_C 語言
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支