日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

教你如何實現在react項目中嵌入Blazor_React

作者:token ? 更新時間: 2023-03-19 編程語言

如何實現在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> &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  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

欄目分類
最近更新