快捷導(dǎo)航

教你如何實(shí)現(xiàn)在react項(xiàng)目中嵌入Blazor

更新時(shí)間：2023年01月23日 09:32:51 作者：token

這篇文章主要介紹了如何實(shí)現(xiàn)在react現(xiàn)有項(xiàng)目中嵌入Blazor,通過這個(gè)案例我們可以知道 blazor也可以像react那樣嵌入在任何的現(xiàn)有項(xiàng)目中，并且使用方便，需要的朋友可以參考下

如何實(shí)現(xiàn)在react現(xiàn)有項(xiàng)目中嵌入Blazor？

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

思路講解：

首先在現(xiàn)有react項(xiàng)目中我們可能某些組件是在Blazor中完成，但是我們沒辦法找到怎么在react中輕量級(jí)使用blazor組件，可能會(huì)有人會(huì)使用iframe去加載Blazor項(xiàng)目，但是我不太喜歡這種方式，所以今天問了很多大佬，有大佬說可以直接在react使用Blazor組件的方式，并且找到了文檔和示例（其實(shí)在Blazor文檔中微軟已經(jīng)提到了這個(gè)但是由于在文檔的在下面的示例中可能沒什么人去看 [文檔直通車](ASP.NET Core Razor 組件 | Microsoft Learn)）

首先流程

創(chuàng)建react項(xiàng)目

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中定義的，會(huì)在下面講到 
                    </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 rel="icon" href="%PUBLIC_URL%/favicon.ico" rel="external nofollow"  />
    <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" rel="external nofollow"  />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" rel="external nofollow"  />
    <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>

創(chuàng)建WebAssembly項(xiàng)目

	mkdir webassembly 
	cd webassembly
	dotnet new blazorwasm-empty

WebAssembly文件夾并且在文件夾中創(chuàng)建 WebAssembly的空項(xiàng)目
需要確保項(xiàng)目是7.0 因?yàn)槟壳爸恢С?的預(yù)覽和7的正式版
安裝 Microsoft.AspNetCore.Components.CustomElements

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

Microsoft.AspNetCore.Components.CustomElements 是提供組件化的主要實(shí)現(xiàn)

修改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對(duì)應(yīng)的標(biāo)記 這樣就可以在react通過my-blazor-counter去渲染BlazorApp.Pages.Index組件的內(nèi)容了
builder.RootComponents.RegisterCustomElement<webassembly.Pages.Index>("my-blazor-counter");
builder.RootComponents.Add<HeadOutlet>("head::after");

await builder.Build().RunAsync();

webassembly.Pages.Index組件相關(guān)代碼

<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>

如何查看運(yùn)行效果：

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

但是我現(xiàn)在做最簡(jiǎn)單的
先將react build生成

yarn build

將build目錄下面的所有文件拷貝到webassembly\wwwroot下，并且覆蓋index.html

然后執(zhí)行dotnet程序在webassembly目錄下執(zhí)行

dotnet watch

將會(huì)打開瀏覽器，效果入下圖，我們可以添加 Add Blazor counter

效果將是這樣，可以點(diǎn)擊Click me將會(huì)條件 Current count數(shù)量點(diǎn)擊Remove Blazor counter將會(huì)刪除razor組件

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

通過這個(gè)案例我們可以知道 blazor也可以像react那樣嵌入在任何的現(xiàn)有項(xiàng)目中，并且使用方便，如果是vue的話目前還不知道是否支持目前官方只提供了angular和react倆種實(shí)現(xiàn)，并且支持webassembly和server，當(dāng)前教程是WebAssembly的實(shí)踐，Server會(huì)有所差異，

到此這篇關(guān)于教你如何實(shí)現(xiàn)在react現(xiàn)有項(xiàng)目中嵌入Blazor的文章就介紹到這了,更多相關(guān)reactt現(xiàn)有項(xiàng)目嵌入Blazor內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: