在一个 blazor 示例中,我使用 RenderFragment 来动态更新元素并捕获每次更新的组件引用。在最初捕获元素时,它会正确捕获组件引用。当我更新一个组件时,它会保留旧的 componentReference。组件参考未正确更新。
Index.razor
@page "/"
<button @onclick="AddContent">1st Update</button>
<button @onclick="AddSecondContent">2nd Update</button>
<button @onclick="CheckContent">Check Update</button>
@DataContent
@code {
RenderFragment DataContent { get; set; }
List<Counter> CounterReference = new List<Counter>();
void AddContent()
{
DataContent = (Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder builder) =>
{
int seq = 0;
for(int i = 0; i < 3; i++)
{
builder.OpenComponent<Counter>(seq++);
builder.AddComponentReferenceCapture(seq++, ins => { CounterReference.Add((Counter)ins); });
builder.CloseComponent();
}
};
InvokeAsync(StateHasChanged);
}
void AddSecondContent()
{
CounterReference.Clear();
DataContent = (Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder builder) =>
{
int seq = 0;
for (int i = 0; i < 2; i++)
{
builder.OpenComponent<Counter>(seq++);
builder.AddComponentReferenceCapture(seq++, ins => { CounterReference.Add((Counter)ins); });
builder.CloseComponent();
}
};
InvokeAsync(StateHasChanged);
}
void CheckContent()
{
Console.WriteLine();
}
}
Run Code Online (Sandbox Code Playgroud)
反剃刀
@page "/counter"
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
public void IncrementCount()
{
currentCount++;
}
}
Run Code Online (Sandbox Code Playgroud)
在上面的示例中,我最初更新了DataContent,我得到CounterReference 的计数为 3。在此之后,我清除了一个 CounterReference 并更新了DataContent。在第二种情况下,我正在渲染 2 个在 DOM 中正确渲染的 Counter 组件。但是我得到CounterReference 的计数为 0。在第二次更新中,如果我没有清除CounterReference,我得到它的值为 3。这样它就保留了它以前的值。我期望这个值为 2。
我做错了什么?
| 归档时间: |
|
| 查看次数: |
364 次 |
| 最近记录: |