如何实现在react现有项目中嵌入Blazor？

喜杨扬 · 发表于 2023-1-19 13:46:57

如何实现在react现有项目中嵌入Blazor？

目前官方只提供了angular和react俩种示例所以本教程只将react教程
思路讲解：
首先在现有react项目中我们可能某些组件是在Blazor中完成，但是我们没办法找到怎么在react中轻量级使用blazor组件，可能会有人会使用iframe去加载Blazor项目，但是我不太喜欢这种方式，所以今天问了很多大佬，有大佬说可以直接在react使用Blazor组件的方式，并且找到了文档和示例（其实在Blazor文档中微软已经提到了这个但是由于在文档的在下面的示例中可能没什么人去看 [文档直通车](ASP.NET Core Razor 组件 | Microsoft Learn)）
首先流程

创建react项目
1. npx create-react-app react-debug
2. cd react-debug
3. 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 (
<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 =>
<my-blazor-counter title={counter.title} increment-amount={counter.incrementAmount}></my-blazor-counter> // 这里将是渲染razor组件的地方 `my-blazor-counter` 是在razor中定义的，会在下面讲到
)}
</header>
);
}
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 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>
</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 @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);
}
}

复制代码

如何查看运行效果：

如果需要查看运行效果有很多种方式比如通过代码将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的分享;

来源:https://www.cnblogs.com/hejiale010426/archive/2023/01/19/17061440.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】我们会及时删除侵权内容，谢谢合作！

如何实现在react现有项目中嵌入Blazor？

本帖子中包含更多资源