Каков рекомендуемый способ рендеринга компонента Blazor динамически? - PullRequest
Новая
       26

Каков рекомендуемый способ рендеринга компонента Blazor динамически?

0 голосов
/ 30 сентября 2019

Я новичок в 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, который может быть объявлен устаревшим без предварительного уведомления, но кажется почти идеальным. Другой предлагает испускать разметку в коде, что возвращает утомительную работу по написанию серверных элементов управления ASP.NET. Наконец, наиболее распространенное предложение предлагает использовать условную разметку, хотя и очень простую, она связывает код рендеринга с компонентами, которые он рендерит.

Большая часть документации, которую я прочитал, может быть устаревшей и более неактуальной. С официальным выпуском Blazor, каков рекомендуемый способ достигнуть этого?

Ответы [ 2 ]

1 голос
/ 02 октября 2019

Вы должны создать RenderFragment и использовать его в качестве средства визуализации вашего полиморфного компонента ... Я использовал компонент Counter по умолчанию для шаблона Blazor в качестве родительского (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() };
}
1 голос
/ 30 сентября 2019

Вы можете использовать оператор switch, который проверяет типы. Вы можете размещать компоненты в каждом из случаев или визуализировать свой li так, как вам нравится. 

<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>
...