如何在 blazor 中的 razor 组件中呈现内容?
How to render content inside a razor component in blazor?
使用标签助手,您可以定义一个可以轻松编写内容的区域。例如,我可以制作一个 bootstrap 卡片标签助手,并轻松地在卡片主体标签内呈现我想要的任何内容。使用 Razor 组件,我该如何实现?
<div class="card">
<div class="card-header"></div>
<div class="card-body">
@*render content here*@
</div>
</div>
模板化组件可以使用名为 RanderFragment 的 class 来实现。它们的实现方式与参数 属性 相同,但它们捕获组件标签内声明的内容。
下面是默认 Blazor 项目中的示例。我更新了 SurveyPromt 组件以接收这样的问题内容
<div class="alert alert-secondary mt-4" role="alert">
<span class="oi oi-pencil mr-2" aria-hidden="true"></span>
<strong>@Title</strong>
<span class="text-nowrap">
@ChildContent
<a target="_blank" class="font-weight-bold" href="https://go.microsoft.com/fwlink/?linkid=2127996">brief survey</a>
</span>
</div>
@code {
[Parameter]
public string Title { get; set; }
[Parameter]
public RenderFragment ChildContent { get; set; }
}
这是我将内容传递给调查组件的方式
<SurveyPrompt Title="How is Blazor working for you?">
<i class="carousel-control-next-icon"></i>Please take our survey below
</SurveyPrompt>
您还可以输入 RenderFragment,在此处阅读更多相关信息:
https://docs.microsoft.com/en-us/aspnet/core/blazor/templated-components?view=aspnetcore-3.1
使用标签助手,您可以定义一个可以轻松编写内容的区域。例如,我可以制作一个 bootstrap 卡片标签助手,并轻松地在卡片主体标签内呈现我想要的任何内容。使用 Razor 组件,我该如何实现?
<div class="card">
<div class="card-header"></div>
<div class="card-body">
@*render content here*@
</div>
</div>
模板化组件可以使用名为 RanderFragment 的 class 来实现。它们的实现方式与参数 属性 相同,但它们捕获组件标签内声明的内容。
下面是默认 Blazor 项目中的示例。我更新了 SurveyPromt 组件以接收这样的问题内容
<div class="alert alert-secondary mt-4" role="alert">
<span class="oi oi-pencil mr-2" aria-hidden="true"></span>
<strong>@Title</strong>
<span class="text-nowrap">
@ChildContent
<a target="_blank" class="font-weight-bold" href="https://go.microsoft.com/fwlink/?linkid=2127996">brief survey</a>
</span>
</div>
@code {
[Parameter]
public string Title { get; set; }
[Parameter]
public RenderFragment ChildContent { get; set; }
}
这是我将内容传递给调查组件的方式
<SurveyPrompt Title="How is Blazor working for you?">
<i class="carousel-control-next-icon"></i>Please take our survey below
</SurveyPrompt>
您还可以输入 RenderFragment,在此处阅读更多相关信息: https://docs.microsoft.com/en-us/aspnet/core/blazor/templated-components?view=aspnetcore-3.1