直接在 Blazor 页面中编写 Blazor 组件 HTML 元素的子元素答案

【问题标题】：writing child of a blazor component HTML element directly in a Blazor Page直接在 Blazor 页面中编写 Blazor 组件 HTML 元素的子元素
【发布时间】：2021-07-08 08:21:59
【问题描述】：

在我的Blazor WebAssembly 项目中，我有以下简单的blazor component：

<video class="video-class">
    <source src="source_1" type="video/mp4" />
    <source src="source_2" type="video/mpeg" />
    Your browser isn't supported!
</video>

要在页面中使用此组件，我只需在 index.razor 页面中编写以下内容：

@page "/"

<RazorComponentExample>
</RazorComponentExample>

但我想在blazor component 中写下以下内容：

<video class="video-class">
    
</video>

在index.razor 页面中，我想使用这样的组件：

@page "/"

<BlazorComponentExample>
    <source src="source_1" type="video/mp4" />
    <source src="source_2" type="video/mpeg" />
    Your browser isn't supported!
</BlazorComponentExample>

你知道怎么做吗？

【问题讨论】：

你试过什么？#
@MisterMagoo 什么都没有，因为我不知道从什么开始
这是在 Blazor 中开发组件的基础知识。 “不知道从哪里开始”表明你应该做一些学习模块。你会发现Blazor University 是一个很好的起点。

标签： c# blazor blazor-webassembly

【解决方案1】：

你需要一个RenderFragment，你的组件应该是这样的：

<video class="video-class">
    @ChildContent
</video>

@code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }
}

【讨论】：

【解决方案2】：

您的组件需要如下所示：

<video class="video-class">
  @ChildContent
</video>
@code {
[Parameter] public RenderFragment ChildContent { get; set; }
}

然后你的索引页就可以工作了。

Razor 对开始标签和结束标签之间的内容的默认约定是将其“编码”为名为 ChildContent 的 RenderFragment（如果存在这样的属性）。然后，您可以通过将其声明为 @ChildContent 将其放置在组件中您喜欢的位置。

【讨论】：