امکان تهیه Custom Elements در NET 6 Blazor.
در ادامه یک کامپوننت Todo ایجاد خواهیم کرد:
در نهایت درون فایل App.js میتوانیم از کامپوننت Todo استفاده کنیم:
در آخرین نسخه Blazor این امکان فراهم شده است که بتوانیم از کامپوننتهای Blazor درون پروژههای React/Vue, Angular, ... استفاده کنیم (+). البته این فیچر هنوز به صورت آزمایشی میباشد و ممکن است API آن تغییر کند.
در ادامه یک مثال از این قابلیت را مشاهده خواهید کرد.
ایجاد پروژه Blazor
یک دایرکتوری ایجاد کرده و درون آن یک پروژه blazorwasm با نام blazor_wasm ایجاد کنید:
dotnet new blazorwasm blazor_wasm
برای استفاده از این فیچر میبایست پکیج Microsoft.AspNetCore.Components.CustomElements را نصب کنیم:
dotnet add package Microsoft.AspNetCore.Components.CustomElements --version 0.1.0-alpha.21466.1
@page "/todo" <PageTitle>Todo</PageTitle> <h1>Todo (@todos.Count(todo => !todo.IsDone))</h1> <ul> @foreach (var todo in todos) { <li> <input type="checkbox" @bind="todo.IsDone" /> <input @bind="todo.Title" /> </li> } </ul> <input placeholder="Something todo" @bind="newTodo" /> <button @onclick="AddTodo">Add todo</button> @code { public class TodoItem { public string? Title { get; set; } public bool IsDone { get; set; } } private List<TodoItem> todos = new(); private string? newTodo; private async void AddTodo(MouseEventArgs e) { if (!string.IsNullOrWhiteSpace(newTodo)) { todos.Add(new TodoItem { Title = newTodo }); newTodo = string.Empty; } } }
برای تبدیل کامپوننت فوق به یک Custom Element درون فایل Program.cs خط زیر را اضافه میکنیم:
builder.RootComponents.RegisterAsCustomElement<Todo>("todo-element");
استفاده از کامپوننت فوق درون یک پروژه React
npx create-react-app blazor_react && cd blazor_react
برای استفاده از Custom Element موردنظر دو خط زیر را به فایل public/index.html اضافه میکنیم:
<script src="_content/Microsoft.AspNetCore.Components.CustomElements/BlazorCustomElements.js"></script> <script src="_framework/blazor.webassembly.js"></script>
همچنین لازم است یک پراکسی نیز درون پروژه ایجاد کنیم (درون فایل package.json)؛ با اینکار اسکریپتهای موردنیاز فوق از سمت سرور دریافت خواهند شد:
"proxy": "BLAZOR_APP_ADDRESS", // for example: http://localhost:5269
function App() { return ( <div className="App"> <todo-element /> </div> ); } export default App;