Question

我对Blazor并不陌生，具有Angular和Vue.js的基本经验。我想呈现一个多态组件的列表：

<ul>
    @foreach (fruit of fruits) 
         <li>HOW DO I RENDER FRUIT HERE??? </li> // render the fruit component
</ul>

@code {
   // Each member in the list is a subtype of Fruit
   var fruits = List<FruitComponent> {
       new PearComponent(),
       new AppleComponent()'
       new BananaComponent(),
       new RasberryComponent()
}

从我收集到的信息来看，有几种方法可以解决自己的缺点。一个不常见的建议使用未记录的API调用，可以不建议使用该API调用，但似乎是非常理想的。另一个建议在代码中发出标记，这会使编写ASP.NET Server Controls的工作变得乏味。最后，最常见的建议是使用条件标记，尽管非常简单，但它会将呈现代码耦合到正在呈现的组件。

我阅读的大多数文档都可能过时并且不再相关。随着Blazor的正式发布，推荐的实现方式是什么？

Answer 1

您可以使用switch语句检查类型。您可以在每种情况下放置组件，也可以根据需要随意渲染。

<ul>
    @foreach (fruit in fruits)
    {
        switch(fruit)
        {
            case PearComponent p:
                <PearComponent ParameterOfSomeSort="p"></PearComponent>
                <li>Or render pears like this, if you want the li in it</li>
                break;
            case AppleComponent a:
                <AppleComponent></AppleComponent>
                break;
            case BananaComponent b:
                <BananaComponent></BananaComponent>
                break;
            case RaspberryComponent r:
                <RaspberryComponent></RaspberryComponent>
                break;
        }
    }
</ul>

Answer 2

您必须创建一个RenderFragment，并将其用作多态组件的呈现器...我已经使用默认Blazor的模板Counter组件作为父组件（CounterParent），然后CounterChild继承了CounterParent。希望对您有所帮助！！问候！

@page "/"

@foreach (CounterParent counter in components)
{
    RenderFragment renderFragment = (builder) => { builder.OpenComponent(0, counter.GetType()); builder.CloseComponent(); };
    <div>
        <div>Before the component</div>
        @renderFragment
        <div>Afterthe component</div>
    </div>
}

@code
{
    List<CounterParent> components = new List<CounterParent>() { new CounterParent(), new CounterChild() };
}

动态渲染Blazor组件的推荐方法是什么？

2 个答案: