7

我想在 Blazor 中做一些我通常在 React 中做的事情：创建一个内部使用其他子组件的可重用组件，并能够将这些子组件作为参数传递。我需要能够将子组件视为依赖项，可以根据需要注入不同上下文中可能需要的任何自定义实现。

例如，想象一个TextBox.razor组件，它使您能够传递自定义组件以根据需要呈现标签，只要它实现ILabel接口即可。我尝试过这样的事情，但语法似乎无效：

文本框.razor

在此处输入图像描述

从屏幕截图中可以看出，Blazor 不允许我将 ParameterLabel用作组件。知道如何实现这一目标吗？

4

2 回答 2

7

您应该能够使用模板化组件来完成此操作。

文本框.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。

您还接受 a LabelTemplate，它接受 type 的对象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 对象传递给每个 Textbox 组件的 TItem 属性，并使用@context语法在 LabelTemplate 中访问它。

起初这可能看起来令人困惑，所以请在此处阅读

编辑 它只是取决于你想要完成什么。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; }
    }
于 2019-11-02T16:27:52.840 回答
4

我意识到这可能已经晚了，但我只是挣扎了一下，发现它非常容易！以为我会为寻找的人提供一个简单的答案。

这是我的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; }
}

请注意，导航属性是一个RenderFragment - 这是关键。现在在我的页面中，我可以像这样简单地添加它：

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

您在这里看到Title参数像往常一样输入，但Navigation参数作为PageHeader的元素输入！真的，你可以在里面放任何东西标签，它将呈现您拥有@Navigation的位置。

参考：https ://blazor-university.com/template-components-with-renderfragements/passing-data-to-a-renderfragement/

拍了拍你的例子：

标签.razor

<label>@Text</label>

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

文本框.razor

<div class="textbox">
    <Label>
        <Text>
            <div>
                Embedded label <br />
                You can even drop components in here!
            </div>
        </Text>
    </Label>
    <input  />
</div>
于 2020-10-17T16:22:34.053 回答