在blazor中添加動態組件列表

Question

我剛剛開始瀏覽blazor（v0.3），並做了一些測試，我想使用blazor添加列表

首先，我創建了一個List<string>來測試同一頁面中的一個簡單列表

<ul>
    @foreach (var item in listItems)
    {
        <li>@item</li>
    }
</ul>


@functions {

    private List<string> listItems = new List<string>();
    private string newItem;

    private void AddItem()
    {
        if (string.IsNullOrEmpty(newItem))
            return;

        listItems.Add(newItem);
        newItem = "";
    }

}

這工作正常，將所有元素添加到列表中。 但后來，我嘗試添加成分，添加單個組件很容易，基於這個問題， 在這里 ，但對於一個列表，我有一個問題：

• 我創建了一個<li>組件只是為了測試組件的功能，這是組件視圖

 <li id="@ID"> @Text </li> @functions { [Parameter] string Text { get; set; } [Parameter] string ID { get; set; } } 

• 然后在父視圖中

 <input type="text" bind="TxtExample" name="inpAdd"/> <button onclick="@addCompoment">add comp1</button> <div class="simple-list-list"> 

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

@functions {

    private List<RenderFragment> componentListTest { get; set; }
    private int currentCount {get; set;}
    private string TxtExample { get; set; }

    protected override void OnInit()
    {
        currentCount = 0;
        componentListTest = new List<RenderFragment>();
    }


    protected void addCompoment()
    {

        componentListTest.Add(CreateDynamicComponent(currentCount));
        currentCount++;
    }


    RenderFragment CreateDynamicComponent(int counter) => builder =>
    {
        var seq = 0;
        builder.OpenComponent(seq, typeof(listExample));
        builder.AddAttribute(++seq, "Text", "text --  "+TxtExample);
        builder.AddAttribute(++seq, "id","listed-"+counter);

        builder.CloseComponent();

    };
}

當我加載拳頭元素正確加載時：

但是當我輸入第二個時，所有這些都被替換為最后一個：

知道發生了什么嗎？

Answer 1

您使它變得太復雜了。 您無需動態實例化組件即可使此方案起作用。

您可以執行以下操作：

<ul>
    @foreach (var item in listItems)
    {
        <myComponent bind-myVar="@item"></myComponent>
    }
</ul>

組件將為您實例化。

另請參閱此處如何使參數在組件上工作。

Answer 2

這是因為TxtExample對於組件是全局的。 當Blazor檢測到可能的UI更改時，它將重新計算整個組件並以任何差異更新DOM。 因此，當您更改文本框時，將更新TxtExample ，然后重新計算Razor，為所有行插入新的TxtExample值。