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

Question

假设我有一个名为 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？以及如何指定使用哪个？

Answer 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

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

How to specify where html goes in a Blazor Component

c#

blazor-server-side