如何指定 html 在 Blazor 组件中的位置

【问题标题】：How to specify where html goes in a Blazor Component如何指定 html 在 Blazor 组件中的位置
【发布时间】：2021-12-28 15:53:07
【问题描述】：

假设我有一个名为 component1.razor 的文件，在该文件中我有以下代码：

<div class="parent">
    <div class="item1" > </div>
    <div class="item2" > </div>
</div>

现在在另一个文件中像这样使用该组件：

<component1> 
    <!-- I add more html here -->
    <h3>Text</h3>
    <p>more text</p>
</component1>

组件里面的内容是哪个div，item1还是item2？以及如何指定使用哪个？

【问题讨论】：

标签： c# blazor-server-side

【解决方案1】：

您必须在组件中定义参数。
Component1.razor

<div class="parent">
    <div class="item1">@Item1</div>
    <div class="item2">@Item2</div>
</div>

@code {

    [Parameter]
    public RenderFragment Item1 { get; set; }

    [Parameter]
    public RenderFragment Item2 { get; set; }
}

并像这样使用它：

<Component1>
    <Item1><h3>Text</h3></Item1>
    <Item2><p>more text</p></Item2>
</Component1>

见：Build reusable UI components with Blazor

【讨论】：