亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時間:2023年01月23日 09:32:51   作者:token  
這篇文章主要介紹了如何實現在react現有項目中嵌入Blazor,通過這個案例我們可以知道 blazor也可以像react那樣嵌入在任何的現有項目中,并且使用方便,需要的朋友可以參考下

如何實現在react現有項目中嵌入Blazor?

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

思路講解:

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

首先流程

創(chuàng)建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" 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項目

	mkdir webassembly 
	cd webassembly
	dotnet new blazorwasm-empty 

WebAssembly文件夾 并且在文件夾中創(chuàng)建 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

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

dotnet watch

將會打開瀏覽器 ,效果入下圖,我們可以添加 Add Blazor counter

效果將是這樣,可以點擊Click me將會條件 Current count數量 點擊Remove Blazor counter將會刪除razor組件

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

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

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

相關文章

  • 在React中強制重新渲染的4 種方式案例代碼

    在React中強制重新渲染的4 種方式案例代碼

    這篇文章主要介紹了在React中強制重新渲染的4 種方式,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2023-12-12
  • react中使用ant組件庫的modal彈窗報錯問題及解決

    react中使用ant組件庫的modal彈窗報錯問題及解決

    這篇文章主要介紹了react中使用ant組件庫的modal彈窗報錯問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-03-03
  • antd+react中upload手動上傳單限制上傳一張

    antd+react中upload手動上傳單限制上傳一張

    本文主要介紹了antd+react中upload手動上傳單限制上傳一張,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2022-06-06
  • React使用context進行跨級組件數據傳遞

    React使用context進行跨級組件數據傳遞

    這篇文章給大家介紹了React使用context進行跨級組件數據傳遞的方法步驟,文中通過代碼示例給大家介紹的非常詳細,對大家學習React context組件數據傳遞有一定的幫助,感興趣的小伙伴跟著小編一起來學習吧
    2024-01-01
  • react滾動加載useInfiniteScroll?詳解

    react滾動加載useInfiniteScroll?詳解

    使用useInfiniteScroll?hook可以處理檢測用戶何時滾動到頁面底部的邏輯,并觸發(fā)回調函數以加載更多數據,它還提供了一種簡單的方法來管理加載和錯誤消息的狀態(tài),今天通過實例代碼介紹下react滾動加載useInfiniteScroll?相關知識,感興趣的朋友跟隨小編一起看看吧
    2023-09-09
  • 詳解react服務端渲染(同構)的方法

    詳解react服務端渲染(同構)的方法

    這篇文章主要介紹了詳解react服務端渲染(同構)的方法,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • React如何實現Vue的watch監(jiān)聽屬性

    React如何實現Vue的watch監(jiān)聽屬性

    在 Vue 中可以簡單地使用 watch 來監(jiān)聽數據的變化,還能獲取到改變前的舊值,而在 React 中是沒有 watch 的,今天通過本文給大家講解React實現Vue的watch監(jiān)聽屬性的方法,需要的朋友可以參考下
    2023-06-06
  • React?Hooks項目實戰(zhàn)

    React?Hooks項目實戰(zhàn)

    React?Hooks是React?16.8版本引入的新特性,它使得在函數組件中也能夠使用狀態(tài)(state)和其他React特性,本文就來詳細介紹一下React?Hooks項目實戰(zhàn),感興趣的可以了解一下
    2023-11-11
  • react:swr接口緩存案例代碼

    react:swr接口緩存案例代碼

    useSWR 是一個 React Hooks,是 HTTP 緩存庫 SWR 的核心方法之一,SWR 是一個輕量級的 React Hooks 庫,通過自動緩存數據來實現 React 的數據獲取,本文給大家介紹react:swr接口緩存案例詳解,感興趣的朋友一起看看吧
    2023-11-11
  • react的ui庫antd中form表單使用SelectTree反顯問題及解決

    react的ui庫antd中form表單使用SelectTree反顯問題及解決

    這篇文章主要介紹了react的ui庫antd中form表單使用SelectTree反顯問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-01-01

最新評論