Передайте дочерний компонент как параметр в Blazor

Вы должны уметь делать это с помощью шаблонных компонентов.

Textbox.razor

@typeparam inputType
<div class="textbox">
    @if(LabelTemplate!=null && TItem!=null)
        @LabelTemplate(TItem)
    <input type="text"/>
</div>


    @code{
        [Parameter]
        public RenderFragment<inputType> LabelTemplate { get; set; }
        [Parameter]
        public inputType TItem { get; set; }
    }

В приведенном выше коде вы указываете, что компонент принимает тип с использованием @typeparam inputType и получает объект этого типа в качестве параметра TItem.

Вы также принимаете LabelTemplate, который принимает объект типа inputType. Чтобы отобразить этот фрагмент, мы вызываем @LabelTemplate и передаем наш параметр TItem.

Теперь давайте посмотрим, как использовать наш шаблонный компонент в новом компоненте под названием PersonForm.razor.

PersonForm.razor

<Textbox TItem="myPerson">
    <LabelTemplate>
        @context.Name
    </LabelTemplate>
</Textbox>
<Textbox TItem="myPerson">
    <LabelTemplate>
        @context.PhoneNumber
    </LabelTemplate>
</Textbox>

@code{

  Person myPerson = new Person { Name = "Jane Doe", PhoneNumber = "999 999 9999" };
    public class Person
    {
        public string Name { get; set; }
        public string PhoneNumber { get; set; }
    }
}

Я передаю свой объект Person в свойство TItem каждого компонента Textbox и получаю доступ к нему в LabelTemplate, используя синтаксис @context.

Сначала это может показаться запутанным, поэтому прочтите его здесь

Отредактировано. Это просто зависит от того, чего вы хотите достичь. С синтаксисом Verbose появляется гибкость со стороны «реализации» компонента. Вместо того, чтобы форсировать интерфейс, который может не работать с широким спектром моделей / классов, вы позволяете реализации указывать, что делать.

Если вы хотите что-то менее подробное / более жесткое, вы также можете сделать следующее.

@implements ILabel 
<div class="textbox"> 
    <label>@Text</label> 
    <input type="text"/> 
</div> 
@code
{ 
    [Parameter] 
    public string Text { get; set; } 
} 

ILabel.cs

    public interface ILabel
    {
        string Text { get; set; }
    }

Я понимаю, что это, вероятно, поздно, но я просто боролся с этим и обнаружил, что это СУПЕР-просто! Подумал, что я поставлю простой ответ для людей, ищущих.

Вот мой файл OrdersNavigation.razor (который я хочу встроить в заголовок):

<div class="nav-strip">
    <NavLink href="orders">
        <Icon Name="@Icons.Cart" /> List
    </NavLink>
    <NavLink href="orders/create">
        <Icon Name="@Icons.Plus" /> Create
    </NavLink>
</div>

Вот мой PageHeader.razor:

<div class="page-header">
    <h3>@Title</h3>
    @Navigation
</h3>
<hr />

@code {
    [Parameter] public string Title { get; set; } = "[TITLE]";
    [Parameter] public RenderFragment Navigation { get; set; }
}

Обратите внимание, что свойство Navigation является RenderFragment - это ключ. Теперь на моей странице я могу просто добавить это так:

<PageHeader Title="Orders">
    <Navigation>
        <OrderNavigation />
    </Navigation>
</PageHeader>

Вы видите, что параметр Title вводится как обычно, но параметр Navigation вводится как элемент PageHeader! На самом деле, вы можете поместить что угодно в теги , и он будет отображаться там, где у вас есть @Navigation.

Ссылка: https://blazor-university.com/templating-components-with-renderfragements/passing-data-to-a-renderfragement/

Сделал снимок на вашем примере:

Label.razor

<label>@Text</label>

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

TextBox.razor

<div class="textbox">
    <Label>
        <Text>
            <div>
                Embedded label <br />
                You can even drop components in here!
            </div>
        </Text>
    </Label>
    <input  />
</div>