如何在另一个组件中即时多次动态渲染blazor组件（例如：单击每个按钮）

Question

我想在每次单击按钮时通过动态添加其他blazor组件来更新视图。我该怎么做到。

例如：每次单击组件1上的按钮时，应立即将组件2添加到组件1中。

Answer 1

注意：该示例创建于很久以前...目前，Blazor支持可用于同一目的的高级功能。

您可以为此使用模板化组件。 Read the linked section，然后尝试将示例转换为模板化组件。

ChildComponent.razor

<li><div>@Title</div></li>  

    @code {
      [Parameter]
      public string Title { get; set; } 
     }

ParentComponent.razor

    <p>Type the title for the new component and then click the button<p>

    <input type="text" @bind="@Title" />

   <button @onclick="@AddComponent">New Component</button>

    <div>   
     @if (!list.Any())
        {
            <p>You have no items in your list</p>
        }
        else
        {
            <ul>
                @foreach (var item in list)
                {
                    @item();
                }
            </ul>
        }
    </div>

    @code {

        public List<RenderFragment> list { get; set; }
        public string Title { get; set; }

        protected override void OnInitialized()
        {
           list = new List<RenderFragment>();
        }


        protected void AddComponent()
        {
                list.Add(CreateDynamicComponent());

        }


        RenderFragment CreateDynamicComponent() => builder =>
        {

            builder.OpenComponent(0, typeof(ChildComponent));
            builder.AddAttribute(1, "Title", "Title:  " + Title);
            builder.CloseComponent();

        };
    }

希望这行得通...